Shadcn.io is not affiliated with official shadcn/ui
Sticky Blur Navbar Block
A sticky navigation bar with backdrop blur effect built with React, Next.js, shadcn/ui, and Tailwind CSS. Features smooth transitions between transparent top state and frosted glass scrolled state with framer-motion animations.
Nail the sticky navbar experience with this backdrop blur navigation bar. At the top of the page, the navbar sits clean and borderless. As the user scrolls, it transitions smoothly to a frosted glass background with a subtle border. A built-in state toggle lets you preview both states instantly. Built with framer-motion for silky transitions and shadcn/ui for consistent button styling.
Sticky Blur Navbar Block preview
Installation
Related Components
Minimal Navbar
Ultra-clean single-row navbar
Centered Logo Navbar
Navbar with centered logo between nav groups
Transparent Hero Navbar
Glass navbar for hero sections
Floating Pill Navbar
Pill-shaped floating navigation
Mega Menu Navbar
Navbar with mega menu dropdowns
Search Expandable Navbar
Navbar with expandable search input
FAQ
Was this page helpful?
Sign in to leave feedback.
React Status Page Navbar Block
A status page navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a StatusHub logo, live system status indicator with green or amber dot, navigation for Current Status, Incidents, Maintenance, and Subscribe pages, plus an RSS feed icon and subscribe button with framer-motion animations.
React Tabs Underline Navbar Block
A tab-style navigation bar with animated underline indicator built with React, Next.js, shadcn/ui, and Tailwind CSS. Clicking a nav item slides a bottom border to the active tab using framer-motion layoutId animation. Active tab uses text-foreground while inactive tabs use text-muted-foreground for clear visual hierarchy.