Sticky Banner

Dismissible announcement bar pinned above the header.

Velora 0.4 is out — 64 components

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/sticky-banner.json

Adds components/velora/sticky-banner.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`dismissible` Hide the dismiss button for banners that must stay put	`boolean`	`true`
`onDismiss` Called after the banner is dismissed; focus has already moved to the next focusable element	`() => void`	`—`
`children*`	`React.ReactNode`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: Nothing animates, so reduced-motion users see the same banner.
Keyboard: The dismiss button is a native button with a visible focus outline. Dismissing moves focus to the next focusable element after the banner.
Screen readers: The dismiss button is named "Dismiss announcement"; the banner itself is a plain div with no landmark role.

Dismissible announcement bar pinned above the header.

Velora 0.4 is out — 64 components

pnpm dlx shadcn@latest add https://paulkeys.org/r/sticky-banner.json

Adds components/velora/sticky-banner.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`dismissible` Hide the dismiss button for banners that must stay put	`boolean`	`true`
`onDismiss` Called after the banner is dismissed; focus has already moved to the next focusable element	`() => void`	`—`
`children*`	`React.ReactNode`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: Nothing animates, so reduced-motion users see the same banner.
Keyboard: The dismiss button is a native button with a visible focus outline. Dismissing moves focus to the next focusable element after the banner.
Screen readers: The dismiss button is named "Dismiss announcement"; the banner itself is a plain div with no landmark role.