How to Add an Alert to a React App

Before installing the Alert, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your styles, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. Projects scaffolded with create-next-app, npm create vite, or npx drivn@latest create have all three wired up already. For a custom setup, check the compilerOptions.paths entry in your tsconfig.json; the installation page lists the minimal config. The Alert reads color tokens — --primary, --success, --destructive — from your Tailwind theme, so make sure those exist or rename them in the component after install. If you plan to use the icon prop, the CLI adds lucide-react for you when it is missing.

Run the CLI from your project root to add the Alert source file. The command prompts once for your install directory, defaulting to src/components/ui/, then writes alert.tsx and adds lucide-react to your package.json if it is not already there. No global config file is created — the Alert is just a TypeScript file in your repo that you edit like any other component. The CLI docs cover the --cwd and --dir flags for monorepos or non-standard layouts. Once the file lands you own it; future Drivn releases will not overwrite it, so any change you make is permanent. Commit the change to keep a clean baseline before customizing.

Open the page where the Alert should appear and import it from your UI directory. The API is a single component — no AlertTitle or AlertDescription wrappers to nest. Pass variant to pick one of default, info, success, or destructive, title for the bold heading, icon for an optional Lucide icon, and the message itself as children. Because the component holds no state, it renders the same on the server and the client, which keeps it usable inside server components and static pages alike. See the Alert docs for the full prop table and the examples page for seven copy-paste patterns covering variants, icons, and titles.

Because the Alert lives in your codebase, customization is a source edit, not a prop workaround. Open src/components/ui/alert.tsx and find the const styles object near the top — it holds every class the component uses, keyed by variant. Edit a variant string to retune its colors, change styles.base for padding or radius, or add a new key like warning and the keyof typeof styles.variants type picks it up at every call site automatically. The icon prop accepts a component reference (icon={Info}) or a pre-rendered element (icon={<Info className="size-5" />}), so per-alert icon styling is one prop away. The theming page maps every token the variants read from.

Drivn's Alert renders a plain div with no ARIA role by default, which is fine for a banner that sits on the page from first render — a screen reader reads it in normal document order. For an alert that appears in response to an event, like a failed save or a successful upload, you want assistive technology to announce it immediately. Add role="alert" to the outer div in src/components/ui/alert.tsx and the message becomes a live region that announces on insertion. Because you own the source, this one-line edit is permanent. For transient, self-announcing confirmations that should disappear on their own, Toast is the better fit — it ships with a live region built in. The shadcn/ui comparison covers what the Radix-based alternative does here by default.