Get Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- React Hook Form
- Hover Card
- Input
- Input OTP
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation
Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Unable to process your payment.
Please verify your billing information and try again.
- Check your card details
- Ensure sufficient funds
- Verify billing address
import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react" import { Alert, AlertDescription, AlertTitle, } from "@/components/ui/alert" export function AlertDemo() { return ( <div className="grid w-full max-w-xl items-start gap-4"> <Alert> <CheckCircle2Icon /> <AlertTitle>Success! Your changes have been saved</AlertTitle> <AlertDescription> This is an alert with icon, title and description. </AlertDescription> </Alert> <Alert> <PopcornIcon /> <AlertTitle> This Alert has a title and an icon. No description. </AlertTitle> </Alert> <Alert variant="destructive"> <AlertCircleIcon /> <AlertTitle>Unable to process your payment.</AlertTitle> <AlertDescription> <p>Please verify your billing information and try again.</p> <ul className="list-inside list-disc text-sm"> <li>Check your card details</li> <li>Ensure sufficient funds</li> <li>Verify billing address</li> </ul> </AlertDescription> </Alert> </div> ) } Installation
pnpm dlx shadcn@latest add alert
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert variant="default | destructive"> <Terminal /> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> You can add components and dependencies to your app using the cli. </AlertDescription> </Alert>Deploy your shadcn/ui app on Vercel
Trusted by OpenAI, Sonos, Adobe, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Deploy to Vercel