Components
Alert
Callouts for messages that need attention, with severity-aware ARIA roles.
Heads up
The brand variant for informational callouts.
Saved
Your changes were stored successfully.
Careful
This action affects every environment.
Something went wrong
We couldn’t complete that request.
Usage
With @flagon-io/ui installed (see Installation), import it directly.
import { Alert, AlertTitle, AlertDescription } from "@flagon-io/ui";
import { Info } from "lucide-react";
<Alert variant="brand" icon={<Info />}>
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>Something you should know about.</AlertDescription>
</Alert>Prefer to own the code?
You don’t have to install the package - you can copy this component into your project with the shadcn CLI and edit it freely.
npx shadcn@latest add https://ui.flagon.io/r/alert.json