Shadcn.io is not affiliated with official shadcn/ui
Navbar 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.
Guide new users through your onboarding flow with this step-by-step progress navbar. Each step shows its status at a glance: completed steps display checkmarks, the current step is highlighted with a pulsing indicator, and future steps remain muted. Connector lines visually link each stage while a percentage counter tracks overall progress. Built with TypeScript, shadcn/ui, and Tailwind CSS for seamless SaaS onboarding experiences.
Related Components
Trial Countdown Navbar
SaaS navbar with trial days remaining
Breadcrumb Dropdown Navbar
Multi-level breadcrumb with dropdowns
Progress Indicator Navbar
Navbar with progress tracking bar
Breadcrumb Navbar
Dashboard navbar with breadcrumb trail
Settings Header Navbar
Settings page header with tab navigation
Admin Panel Navbar
Admin navbar with search and environment badge
FAQ
Was this page helpful?
Sign in to leave feedback.
Notification Bell
A navigation bar with notification dropdown panel built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a bell icon with red badge count, a dropdown showing notification items with timestamps, and a mark all as read action using framer-motion animations.
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.