Shadcn.io is not affiliated with official shadcn/ui
Navbar Pill Links
A navigation bar with pill-shaped nav items built with React, Next.js, shadcn/ui, and Tailwind CSS. Active links display a rounded-full background indicator that smoothly slides between items using framer-motion layoutId animations. Hover state shows a subtle bg-muted/50 transition.
Give your navigation a tactile, app-like feel with pill-shaped active indicators that glide between links. The active pill uses a smooth framer-motion layoutId animation that follows user interaction, while hover states provide instant feedback with subtle background transitions. Perfect for marketing sites, portfolios, and modern SaaS landing pages.
Related Components
Segmented Control Navbar
Navbar with iOS-style segmented control
Split Layout Navbar
Navbar with left nav and right actions
Stacked Double Navbar
Two-row navbar with tabs and utility links
Minimal Navbar
Clean minimal navigation bar
Floating Pill Navbar
Pill-shaped floating navigation
Centered Logo Navbar
Navbar with centered logo layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Open Source
An open source project navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a project logo with version badge, Docs, Examples, Playground, Blog, and Releases links, a GitHub stars count display, a Get Started CTA button, and a GitHub icon button with framer-motion entrance animations.
Podcast Platform
A podcast platform navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a PodWave logo with headphones icon, Discover, Library, Following, and Charts nav links, a now-playing episode indicator with animated bars, a search button, and a Create Podcast CTA with framer-motion entrance animation.