All components
Notice Banner
FeedbackA notice bar that drops in and can be dismissed.
Scheduled maintenance this Sunday at 02:00 UTC.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/notice-banner.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/notice-banner.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Notice content. |
Accessibility
- The dismiss button has an aria-label rather than relying on the icon.
- AnimatePresence collapses height on exit, so layout settles cleanly.
- Text is real content, so the notice is announced normally.
Dependencies
motionclsxtailwind-mergelucide-react