Shadcn.io is not affiliated with official shadcn/ui

Announcement

Pill-shaped announcement badge for product updates in React

A rounded badge for announcing product updates, feature releases, or version bumps. Includes an optional tag ("New", "Beta"), hover shadow, and text truncation. Place it above your hero headline.

Announcement preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/announcement.json

npx shadcn@latest add https://www.shadcn.io/r/announcement.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/announcement.json

bunx shadcn@latest add https://www.shadcn.io/r/announcement.json

Pill

Simple status pill

Banner

Full-width announcement

Status

Status indicator

Limelight Nav

Highlighted navigation

FAQ

Was this page helpful?

Tabs

Animated tabs with sliding highlight indicator for React

Banner

Dismissible announcement banner with icon and action button for React

Announcement

Announcement preview

Installation

Related Components

Pill

Banner

Status

Limelight Nav

FAQ

How do I put it together?

What's the themed prop for?

What happens with long text?

Can I add icons?