All components
Alert Callout
FeedbackA callout that slides in, its icon popping to draw attention.
Token expires soon
Rotate it before Friday to avoid downtime.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/alert-callout.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/alert-callout.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | "info" | Colour and icon set. |
| title | string | - | Headline text. |
| children | ReactNode | - | Optional body copy. |
Accessibility
- Each variant pairs a distinct icon with its colour, so meaning is not colour-only.
- Title and body are real text, announced in order.
- Colours are tuned per theme rather than reused from light mode.
Dependencies
motionclsxtailwind-mergelucide-react