All components
Toast
FeedbackA toast that slides in and can be dismissed.
Changes saved
Your draft is up to date.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/toast.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/toast.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Headline text. |
| description | string | - | Optional supporting line. |
| icon | ReactNode | - | Overrides the default check icon. |
Accessibility
- The dismiss button carries an aria-label.
- Pair with an aria-live region when toasts appear programmatically.
- Icon is decorative; the title always carries the message.
Dependencies
motionclsxtailwind-mergelucide-react