Banner
A notification banner that appears at the top or bottom of the viewport. Supports queuing, priority, and auto-dismiss.
Installation
pnpm dlx shadcn@latest add "@diceui/banner"Layout
import {
Banner,
BannerIcon,
BannerContent,
BannerTitle,
BannerDescription,
BannerActions,
BannerClose,
} from "@/components/ui/banner";
return (
<Banner>
<BannerIcon />
<BannerContent>
<BannerTitle />
<BannerDescription />
</BannerContent>
<BannerActions />
<BannerClose />
</Banner>
);Examples
Stacked Banners
Use the Banners provider to manage multiple banners with a queue system. Banners can be added imperatively using the useBanners hook.
API Reference
Banners
The root provider for managing a queue of banners. Wrap your application or a section to enable banner queuing.
| Data Attribute | Value |
|---|---|
[data-side] | "top" | "bottom" |
Banner
An individual banner component. Can be used standalone or within the Banners provider.
| Data Attribute | Value |
|---|---|
[data-state] | "open" | "closed" |
BannerIcon
Container for the banner's icon.
BannerContent
Container for the banner's text content (title and description).
BannerTitle
The banner's title text.
BannerDescription
The banner's description text.
BannerActions
Container for action buttons.
BannerClose
A button that dismisses the banner. Uses the shadcn Button component internally.
useBanners
Hook to access banner queue management within a Banners provider.
useBanner
Hook to access the current banner's context (id, variant, dismissible state, and close handler).
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Moves focus to the next focusable element within the banner. |
| ShiftTab | Moves focus to the previous focusable element within the banner. |
| Enter | Activates the focused button. |
| Space | Activates the focused button. |