Shadcn.io is not affiliated with official shadcn/ui
Navbar 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.
Build credibility for your open source project with a navbar that showcases community traction. A live GitHub stars count and version badge signal project maturity while clean documentation links guide contributors and users alike. The dual action pattern with Get Started and GitHub buttons serves both adoption and contribution.
Related Components
SaaS Marketing Navbar
Full SaaS marketing navigation bar
Startup Navbar
Minimal startup navbar with waitlist CTA
Enterprise Navbar
Enterprise software navigation bar
Documentation Navbar
Documentation site navigation bar
Marketplace Navbar
App marketplace navigation bar
Landing Page Navbar
Landing page navigation bar
FAQ
Was this page helpful?
Sign in to leave feedback.
Onboarding Stepper
An onboarding flow navigation bar with step progress built with React, Next.js, shadcn/ui, and Tailwind CSS. Features four sequential steps with checkmarks for completed, highlighted current step, muted future steps, animated connector lines, and progress percentage display with framer-motion transitions.
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.