Banner

Announcement bar with a tube along its bottom edge that strikes on at mount. Remembers dismissal, can scroll.

Built on Icons and Marquee. Installs @radix-ui/react-slot.

NewHalcyon 2.0: branch databases, preview deploys and a CLI that starts in 90 ms.Release notes

Halcyon

Postgres that branches with your code.

Every pull request gets its own database, seeded from production and gone when you merge.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/banner.json

Usage

import { Banner, BannerAction } from "@/components/ui/banner"

<Banner variant="launch" tag="New" dismissible action={<BannerAction>Release notes</BannerAction>}>
  Halcyon 2.0 is out.
</Banner>

Examples

Variants

Info uses the neon color, warning is amber, maintenance is orange with hazard stripes at the ends.

Marquee

Long, changing text runs through Marquee instead of wrapping. Hover or focus stops it, and reduced motion makes it a scrollable line.

Remembered dismissal

With storageKey, a dismissal is kept in localStorage. The banner opens once storage has been read, so returning visitors never see it flash.

API reference

Banner

Prop	Type	Default
`variant`	`"info" \| "launch" \| "warning" \| "maintenance"` Launch lights the tag and brightens the tube. Warning is amber, maintenance orange.	`"info"`
`tag`	`ReactNode` A pill before the message, like "New" or a date.	None
`action`	`ReactNode` A link or button after the message. BannerAction styles it.	None
`dismissible`	`boolean` Shows a close button.	`false`
`storageKey`	`string` Remembers a dismissal in localStorage. Blocked storage is ignored.	None
`open`	`boolean` Controlled visibility.	None
`defaultOpen`	`boolean` Initial visibility when uncontrolled.	`true`
`onOpenChange`	`(open: boolean) => void` Called with false when the banner is dismissed.	None
`marquee`	`boolean` Runs the message through Marquee. The tag shows from 640px up.	`false`
`dismissLabel`	`string` Accessible name of the close button.	`"Dismiss"`
`color`	`NeonColor` Overrides the variant's color.	by variant

BannerAction

Lit text with an arrow that leans forward on hover.

Prop	Type	Default
`asChild`	`boolean` Renders its child, such as a link, with the action's styles. Base UI's render prop works too.	`false`

Accessibility

The banner is a region named "Announcement", not an alert: it doesn't interrupt, and screen reader users can jump to it as a landmark.
Collapsing animates the height, then the banner is hidden from assistive tech and its controls leave the tab order.
With reduced motion the tube is simply on and the banner opens and closes without animating.
Put it in a sticky header yourself with className="sticky top-0 z-50".