HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Meter
  • Multi Select
  • Native Select
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Banner

PreviousNext

A dismissible announcement bar with a tone, an icon and an action. BannerStack piles several in one spot with the banner stacking motion.

Base UIReact AriaRadix UI
New look
Reports now group by client.
Backup complete
All 1,204 receipts are safe.
Trial ends in 3 days
Payment failed
Update the card on file to keep syncing.
Hover the stack to fan it out.

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/banner.json

Usage#

import { Banner, BannerStack } from "@/components/ui/banner"
<Banner
  tone="warning"
  title="Trial ends in 3 days"
  action={<Button size="sm">Upgrade</Button>}
>
  Your data stays put.
</Banner>
 
<BannerStack
  items={items}
  onDismiss={(id) => setItems((prev) => prev.filter((i) => i.id !== id))}
/>

Tones#

info, success, warning and destructive. Each picks a tint and an icon. Warning and destructive banners use role="alert" so screen readers announce them; the rest use role="status".

Stacking#

BannerStack shows the three newest banners. The newest rises in front with a blur, and older ones step back, smaller and dimmer. A fourth pushes the oldest out. Hover or focus the stack to fan it into a list you can read and dismiss from.

Leave room above the stack for the fanned out banners. With reduced motion on, banners swap in place.

Props#

  • Banner. tone, title, icon (pass false to hide it), action, and the description as children. dismissible is on by default; onDismiss runs after the fade out. closeLabel names the close button.
  • BannerStack. items in the order they arrived, each with an id, tone, title, description and action. onDismiss gets the id, so remove it from your list there.
BadgeBreadcrumb

On This Page

InstallationUsageTonesStackingProps