Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
Announcement
Inline notice for short, prominent updates.
Releasev2.1.0 — Dark mode, faster builds, and 12 new components
Installation#
pnpm dlx shadcn@latest add @shark/announcement
Anatomy#
Announcement ├── Badge └── AnnouncementAction
Usage#
import { Announcement, AnnouncementTitle, } from "@/components/ui/announcement";
<Announcement> <Badge> <SparklesIcon /> </Badge> <AnnouncementTitle>New feature added</AnnouncementTitle> </Announcement>
Variants#
Info#
MaintenanceScheduled downtime tonight 2–4 AM UTC. No action needed.
Success#
Warning#
Trial endingYour free trial expires in 3 days. Upgrade to keep access.
Destructive#
Payment failedYour last invoice couldn't be processed. Update your billing info.
Examples#
With icon#
New featuresDark mode and 12 new components available
With link#
The asChild prop renders a link with announcement styling.
Without Badge#
The announcement supports a title-only layout without the badge component.
New features added, check the logs for more details.
API Reference#
Announcement#
Root wrapper for announcement banners or notices.
| Prop | Type | Default |
|---|---|---|
role | "status" | "alert" | "status" |
className | string | - |
asChild | boolean | false |
AnnouncementTitle#
Main title or message of the announcement.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |