Layout (5)
Shadcn.io is not affiliated with official shadcn/ui
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.
'use client'; import { Announcement, AnnouncementTag, AnnouncementTitle, } from '@/components/ui/shadcn-io/announcement'; import { ArrowUpRightIcon } from 'lucide-react'; const Example = () => ( <Announcement> <AnnouncementTag>Latest update</AnnouncementTag> <AnnouncementTitle> New feature added <ArrowUpRightIcon className="shrink-0 text-muted-foreground" size={16} /> </AnnouncementTitle> </Announcement> ); export default Example; import type { ComponentProps, HTMLAttributes } from 'react'; import { Badge } from '@/components/ui/badge'; import { cn } from '@/lib/utils'; export type AnnouncementProps = ComponentProps<typeof Badge> & { themed?: boolean; }; export const Announcement = ({ variant = 'outline', themed = false, className, ...props }: AnnouncementProps) => ( <Badge className={cn( 'group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all', 'hover:shadow-md', themed && 'announcement-themed border-foreground/5', className )} variant={variant} {...(props as any)} /> ); export type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>; export const AnnouncementTag = ({ className, ...props }: AnnouncementTagProps) => ( <div className={cn( '-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs', 'group-[.announcement-themed]:bg-background/60', className )} {...(props as any)} /> ); export type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>; export const AnnouncementTitle = ({ className, ...props }: AnnouncementTitleProps) => ( <div className={cn('flex items-center gap-1 truncate py-1', className)} {...(props as any)} /> ); 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.jsonSign in to access installation commands Sign in
Compound design - Badge-based styling with tag and title components using React composition patternsTheme variants - Multiple visual styles with customizable appearance using Tailwind CSS utilitiesHover effects - Shadow transitions and interactive feedback using JavaScript hover statesFlexible content - Tag and title components with className prop support for Next.js applicationsContext theming - Parent theme affects child component styling using TypeScript context patternsIcon integration - Built with Lucide icons for consistent design using shadcn/ui themingOpen source - Free announcement component with rounded badge appearance
'use client'; import { Announcement, AnnouncementTag, AnnouncementTitle, } from '@/components/ui/shadcn-io/announcement'; import { ArrowUpRightIcon } from 'lucide-react'; const Example = () => ( <> <Announcement className="bg-rose-100 text-rose-700" themed> <AnnouncementTag>Error</AnnouncementTag> <AnnouncementTitle> Something went wrong <ArrowUpRightIcon className="shrink-0 opacity-70" size={16} /> </AnnouncementTitle> </Announcement> <Announcement className="bg-emerald-100 text-emerald-700" themed> <AnnouncementTag>Success</AnnouncementTag> <AnnouncementTitle> New feature added <ArrowUpRightIcon className="shrink-0 opacity-70" size={16} /> </AnnouncementTitle> </Announcement> <Announcement className="bg-orange-100 text-orange-700" themed> <AnnouncementTag>Warning</AnnouncementTag> <AnnouncementTitle> Approaching your limit <ArrowUpRightIcon className="shrink-0 opacity-70" size={16} /> </AnnouncementTitle> </Announcement> <Announcement className="bg-sky-100 text-sky-700" themed> <AnnouncementTag>Info</AnnouncementTag> <AnnouncementTitle> Welcome to the platform <ArrowUpRightIcon className="shrink-0 opacity-70" size={16} /> </AnnouncementTitle> </Announcement> </> ); export default Example; import type { ComponentProps, HTMLAttributes } from 'react'; import { Badge } from '@/components/ui/badge'; import { cn } from '@/lib/utils'; export type AnnouncementProps = ComponentProps<typeof Badge> & { themed?: boolean; }; export const Announcement = ({ variant = 'outline', themed = false, className, ...props }: AnnouncementProps) => ( <Badge className={cn( 'group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all', 'hover:shadow-md', themed && 'announcement-themed border-foreground/5', className )} variant={variant} {...(props as any)} /> ); export type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>; export const AnnouncementTag = ({ className, ...props }: AnnouncementTagProps) => ( <div className={cn( '-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs', 'group-[.announcement-themed]:bg-background/60', className )} {...(props as any)} /> ); export type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>; export const AnnouncementTitle = ({ className, ...props }: AnnouncementTitleProps) => ( <div className={cn('flex items-center gap-1 truncate py-1', className)} {...(props as any)} /> ); 'use client'; import { Announcement, AnnouncementTitle } from '@/components/ui/shadcn-io/announcement'; import { ArrowUpRightIcon } from 'lucide-react'; const Example = () => ( <Announcement> <AnnouncementTitle> New feature added <ArrowUpRightIcon className="shrink-0 text-muted-foreground" size={16} /> </AnnouncementTitle> </Announcement> ); export default Example; import type { ComponentProps, HTMLAttributes } from 'react'; import { Badge } from '@/components/ui/badge'; import { cn } from '@/lib/utils'; export type AnnouncementProps = ComponentProps<typeof Badge> & { themed?: boolean; }; export const Announcement = ({ variant = 'outline', themed = false, className, ...props }: AnnouncementProps) => ( <Badge className={cn( 'group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all', 'hover:shadow-md', themed && 'announcement-themed border-foreground/5', className )} variant={variant} {...(props as any)} /> ); export type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>; export const AnnouncementTag = ({ className, ...props }: AnnouncementTagProps) => ( <div className={cn( '-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs', 'group-[.announcement-themed]:bg-background/60', className )} {...(props as any)} /> ); export type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>; export const AnnouncementTitle = ({ className, ...props }: AnnouncementTitleProps) => ( <div className={cn('flex items-center gap-1 truncate py-1', className)} {...(props as any)} /> );
Product launches - Feature announcements and new release notificationsStatus updates - System maintenance and service status communicationsPromotional content - Marketing campaigns and special offer displaysNews highlights - Important updates and company announcements
Built with Badge component and compound pattern. Supports themed mode for different styles. Uses context for child component theming. Hover effects with CSS transitions.