- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Sonner
Toast notification system using Toaster + toast helpers, with support for title/description layouts, action and cancel buttons, and status icons (success, info, warning, error, loading).
Import
Live Demo
Toast notifications with title, description, action/cancel buttons, icon states, and loading transitions.
Figma: DS-shadcn-001 Foundations · Sonner 18482:48401 · Action 17375:198044 · Icon 17375:198096
Position demo (current: bottom-right)
Props
| Name | Type | Default | Description |
|---|---|---|---|
| theme | "light" | "dark" | "system" | "system" | Theme used by Toaster if not inherited from next-themes |
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Placement of toast stack in the viewport |
| duration | number | 4000 | Default auto-dismiss duration for toast notifications |
| richColors | boolean | false | Enables richer variant colors provided by Sonner |
Examples
Basic Toast
With Description
Action + Cancel
Icon Variants
Trigger semantic status toasts with custom icons.