Banner
Full-width announcement bar for the top of a page.
Plinth v1 is in progress · follow along
A new docs section is live
Scheduled maintenance Sunday 02:00 UTC
Payment failed: update billing
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/banner.jsonUsage
import { Banner } from "@/components/ui/banner";
<Banner variant="info" onDismiss={() => setHidden(true)}>
Plinth v1 is in progress · <a href="/changelog">what's new</a>
</Banner>Place it above the site header, edge to edge. Persist dismissal (e.g. localStorage) so it doesn't reappear every visit.
Props
| Prop | Type | Default |
|---|---|---|
variant | neutral · info · success · warning · destructive | neutral |
onDismiss | () => void | — |
Accessibility
role="status"announces the banner without interrupting.- The dismiss control is a labeled button; links inside stay underlined so they're recognizable on the solid background.