sonner
Pick a variant of the sonner component.
Shadcn Sonner: Create Stylish and Functional Sonners for Your UI
Shadcn Sonner component allows users to receive important system notifications and status updates as small toasts.
Built with Sonner, it handles layout, accessibility, and state out of the box.
Used in DASHBOARDS, forms, and headers for non-interruptive feedback on actions.
What is a Shadcn Sonner?
A sonner toast is a versatile element for notification and status actions (e.g., text, actions, and buttons). Shadcn Sonner composes with native HTML elements using Tailwind and Lucide for layout, padding, and state.
Sonner toasts can have titles, descriptions, and action buttons. Each toast is a self-contained unit that helps organize your feedback.
Why Use Shadcn Sonner?
Sonner toasts provide a structured way to present feedback without interrupting users. They help with hierarchy, context, and scanning through entries.
Accessibility and consistency are built-in. By using sonner toasts, your application stays visually uniform while being accessible by default.
Key Features of Shadcn Sonner
- Search Support. Integrated search field for filtering notification contexts.
- Size Variants. Full control over padding, shadows, and state using Tailwind.
- Responsive Design. Sonner toasts work perfectly across all screen sizes and device types.
- Interactive States. Combine with hover effects or interactive elements like buttons.
- Flexible Layout. Sonner toasts can be used as standalone blocks or inside other containers.
Works Well With Other Components
Use Shadcn Sonner inside Shadcn Button or Shadcn Form for action-based feedback. Combine with Shadcn Alert for related state display.
Place Shadcn Input or Shadcn Checkbox around a sonner toast for integrated feedback and entry flows.