Banner
FeedbackA persistent, full-width style alert at the top of a view.
The Banner surfaces important product announcements, system status, or errors. Each variant ships with a matching icon and tint.
npx shadcn@latest add bannerVariants
Info, success, warning, and error states.
Heads up
Shelf is in beta. Expect breaking changes between releases.
Deploy complete
Your site is live at shelf.dev.
Approaching rate limit
You have used 90% of your monthly quota.
Build failed
Check the error log for the failing step.
1<Banner title="Heads up" description="Shelf is in beta." />2<Banner variant="success" title="Deploy complete" />3<Banner variant="warning" title="Approaching rate limit" />4<Banner variant="error" title="Build failed" />
Dismissible
Pass onDismiss to render a close button.
Heads up
Shelf is in beta. Expect breaking changes between releases.
Deploy complete
Your site is live at shelf.dev.
Approaching rate limit
You have used 90% of your monthly quota.
Build failed
Check the error log for the failing step.
1<Banner2 variant="error"3 title="Build failed"4 description="Check the error log."5 onDismiss={() => setVisible(false)}6/>
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| variant | "info" | "success" | "warning" | "error"= "info" | Tint, icon, and emphasis of the banner. |
| title | string | Heading text for the banner. |
| description | string | Optional supporting text. |
| onDismiss | () => void | When set, renders a close button that calls this. |
| icon | LucideIcon | Override the default icon for the variant. |