Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- 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
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Releasev2.1.0 — Dark mode, faster builds, and 12 new components
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/announcement.json
Usage
import { Announcement, AnnouncementBadge, AnnouncementTitle, } from "@/components/ui/announcement";
<Announcement> <AnnouncementBadge>Latest update</AnnouncementBadge> <AnnouncementTitle>New feature added</AnnouncementTitle> </Announcement>
Variants
The variant prop on <AnnouncementBadge /> controls the badge visual style.
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
Add icons to the badge or title to provide visual context. Use aria-hidden on decorative icons.
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, or other ARIA live region role | status |
className | string | - |
asChild | boolean | false |
AnnouncementBadge
Optional badge (e.g. New, Sale) shown alongside the title.
| Prop | Type | Default |
|---|---|---|
variant | default, secondary, outline, success, info, warning, destructive | default |
className | string | - |
asChild | boolean | false |
AnnouncementTitle
Main title or message of the announcement.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |