Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Alert
A callout for displaying important information.
Heads up!
Describe what can be done about it here.
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
<p>Describe what can be done about it here.</p>
</AlertDescription>
</Alert>
);
}
Installation
pnpm dlx shadcn@latest add @coss/alert
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>API Reference
This is a custom component, not a Base UI wrapper.
Alert
Root container for the alert.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "error" | "info" | "success" | "warning" | "default" | Controls the alert styling and color scheme |
AlertTitle
Title text for the alert. Renders as a styled div.
AlertDescription
Description text for the alert. Renders as a styled div with muted foreground color.
AlertAction
Container for action buttons. Automatically positions to the right on larger screens.
Examples
With Icon
Heads up!
Describe what can be done about it here.
import { InfoIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert>
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
With Icon and Action Buttons
Heads up!
Describe what can be done about it here.
import { InfoIcon } from "lucide-react";
import {
Alert,
AlertAction,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Alert>
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
<AlertAction>
<Button size="xs" variant="ghost">
Dismiss
</Button>
<Button size="xs">Ok</Button>
</AlertAction>
</Alert>
);
}
Info Alert
Heads up!
Describe what can be done about it here.
import { InfoIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="info">
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
Success Alert
Heads up!
Describe what can be done about it here.
import { CircleCheckIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="success">
<CircleCheckIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
Warning Alert
Heads up!
Describe what can be done about it here.
import { TriangleAlertIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="warning">
<TriangleAlertIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
Error Alert
Heads up!
Describe what can be done about it here.
import { CircleAlertIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="error">
<CircleAlertIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}