Sticky Banner

A banner component that sticks to top, hides when user scrolls down

Announcing $10M seed funding from project mayhem ventures. Read announcement

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/sticky-banner.json

Examples

Sticky banner

Open in

Announcing $10M seed funding from project mayhem ventures. Read announcement

Props

Prop	Type	Default	Description
`className`	`string`	undefined	Optional CSS class to apply to the banner
`children`	`React.ReactNode`	Required	Content to display inside the banner
`hideOnScroll`	`boolean`	false	When true, hides the banner after scrolling down 40px

Build websites faster and 10x better than your competitors with Aceternity UI Pro

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro

I've been working with Manu for a couple of months now and I can't express enough how impressed I am with his talent. Manu's JavaScript/React web UI programming skills are through the roof. He's he...

Tony Pujals

Founder at Fantastic Realms, Tech Lead at Google