Browse components

Announcement BarFree

Restrained product update strip with gradient sheen and a clean collapse dismiss.

Add to your project

Checking access...

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSSFramer Motion

Props

PropTypeDescription
messagestringBar copy
actionAnnouncementActionOptional CTA — { label, href?, onClick? }
iconReactNodeOptional leading mark
dismissiblebooleanShow the collapse dismiss control
tone'neutral' | 'accent' | 'inverse'Color treatment for the strip
stickybooleanStick to the top of the viewport
onDismiss() => voidFired after the collapse animation
classNamestringStyles for the outer shell

More Navigation Components

Animated Next Button

Compact next button with a looping arrow reveal, crisp press feedback, and loading and disabled states.

Language Selector

Minimal locale control with scaled blur-sm menu and staggered options — no native select chrome.

Dark Mode Toggle

Compact sun and moon switch that persists theme preference and toggles the document dark class.

Pagination with Ellipsis

Numbered pagination that keeps the current page visible and collapses long ranges with ellipses.

Pagination with Dots

Compact pagination controls with arrows and dots by default, plus optional page numbers.