Banner

Dismissible announcement banner with icon and action button for React

Full-width banner for product launches, maintenance notices, promos, or cookie consent. Dismissible with controlled or uncontrolled state. Icon on the left, message in the middle, CTA button and close X on the right. High-contrast colors by default.

Scroll to load preview

Installation

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

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

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

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

Announcement

Compact pill announcement

Status

Status indicators

Pill

Badge labels

FAQ

Was this page helpful?

Announcement

Pill-shaped announcement badge for product updates in React

Cursor

Collaborator cursor indicator with name and message for React

Banner

Banner preview

Installation

Related Components

Announcement

Status

Pill

FAQ

What pieces can I use?

How do I remember when someone dismisses it?

How do I change the color?

What's the inset prop?