Shadcn.io is not affiliated with official shadcn/ui
Navbar Theme Toggle
A clean navigation bar with dark and light mode toggle built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a sun and moon icon toggle with smooth rotation animation, nav links that change color to demonstrate the theme, and a system auto option in a dropdown using framer-motion transitions.
Give users control over their visual experience with this theme toggle navbar. The toggle switches between sun and moon icons with a satisfying rotation animation, and a dropdown provides a system auto option for users who prefer OS-level control. Nav link colors shift to demonstrate the active theme. Drop it into any Next.js app for instant dark mode support.
Related Components
Language Switcher Navbar
Navbar with locale selector dropdown
Minimal Navbar
Clean minimal navigation bar
Dashboard Navbar
Admin navbar with breadcrumb and search
Notification Bell Navbar
Navbar with notification dropdown panel
User Menu Navbar
Navbar with user profile dropdown
Breadcrumb Navbar
Navbar with breadcrumb navigation
FAQ
Was this page helpful?
Sign in to leave feedback.
Tabs Underline
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.
Transparent Hero
A transparent glass navigation bar designed for hero sections built with React, Next.js, shadcn/ui, and Tailwind CSS. Features backdrop blur, white text on dark backgrounds, and a toggle to simulate solid scroll state using framer-motion.