Banner

A full-width announcement bar for the top of an app or marketing page — message, optional icon, action links and a dismiss X. Edge-to-edge, unlike the bordered alert card.

$bunx shadcn@latest add @nx-ui/banner
Registry item
Installs withutils

Brand tone

The solid navy section fill, for headline announcements. Dismissible by default.

The new feedstock dashboard is live.

Track intake quality across every site in real time.

Neutral tone

A surface fill with a hairline ring, paired with a leading featured icon — for lower-key, informational notices.

Scheduled maintenance this Sunday.

Collections routing will be read-only from 02:00–04:00 BST.

Floating tone

A rounded, shadowed card variant that sits inset from the page edges — for cookie notices and contextual prompts.

We use cookies to improve your experience.

Only essential cookies are on by default.

API reference

Exported parts and their props, extracted from the component source.