Announcement
A versatile announcement component that displays important messages with different visual styles and states. Perfect for notifications, alerts, and call-to-action messages.
New feature added
Update successful
Action failed
Please check input
For your information
Announcing Gradients!
Disabled state
Installation
npx shadcn@latest add announcement.json
Usage
Loading...
Features
- Multiple variants (default, success, error, warning, info, gradient)
- Dark mode support
- Keyboard accessibility
- Disabled state
- Click interactions
- Smooth animations and transitions
variant
The visual style variant of the announcement. Can be one of the following:
"default": Default style"success": Success style"error": Error style"warning": Warning style"info": Info style"gradient": Gradient style
Loading...
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "error" |
| children | React.ReactNode | — | The content to display inside the announcement |
| onClick | (e: React.MouseEvent \ | React.KeyboardEvent) => void | — |
| className | string | "" | Additional CSS classes to apply to the component |
| disabled | boolean | false | Whether the announcement is disabled and non-interactive |