Announcement
Compound announcement badge component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring customizable themes, hover effects, and flexible content layout.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/announcement.jsonnpx shadcn@latest add https://www.shadcn.io/registry/announcement.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/announcement.jsonbunx shadcn@latest add https://www.shadcn.io/registry/announcement.jsonFeatures
- Compound design - Badge-based styling with tag and title components using React composition patterns
- Theme variants - Multiple visual styles with customizable appearance using Tailwind CSS utilities
- Hover effects - Shadow transitions and interactive feedback using JavaScript hover states
- Flexible content - Tag and title components with className prop support for Next.js applications
- Context theming - Parent theme affects child component styling using TypeScript context patterns
- Icon integration - Built with Lucide icons for consistent design using shadcn/ui theming
- Open source - Free announcement component with rounded badge appearance
Examples
Themes
Without Tag
Use Cases
- Product launches - Feature announcements and new release notifications
- Status updates - System maintenance and service status communications
- Promotional content - Marketing campaigns and special offer displays
- News highlights - Important updates and company announcements
Implementation
Built with Badge component and compound pattern. Supports themed mode for different styles. Uses context for child component theming. Hover effects with CSS transitions.
Theme Switcher
Interactive theme toggle component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring system preference detection, smooth transitions, and accessibility features.
Banner
Full-width banner notification component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring controlled visibility, dismissible actions, and customizable themes.