Shadcn.io is not affiliated with official shadcn/ui
Navbar Project Management
A project management navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a Taskflow brand logo, My Tasks, Projects, Team, Calendar, and Reports navigation, a New Task quick-action button, filter toggle, notification bell with indicator dot, and user avatar with framer-motion entrance animations. Inspired by Jira and Asana.
Ship a project management navbar that keeps teams productive. This component features the Taskflow brand with navigation for My Tasks, Projects, Team, Calendar, and Reports, a prominent New Task quick-action button with plus icon, a filter toggle, notification bell with unread indicator, and user avatar. Inspired by Jira and Asana. Built with framer-motion for polished transitions and shadcn/ui for consistent, accessible styling.
Related Components
Dashboard Navbar
Dashboard navbar with breadcrumb and search
AI Product Navbar
AI product navbar with token usage indicator
Design Tool Navbar
Design tool navbar with collaborator avatars
Analytics Dashboard Navbar
Analytics navbar with date range picker
Admin Panel Navbar
Admin panel navbar with environment badge
Developer Portal Navbar
Dev portal navbar with API key display
FAQ
Was this page helpful?
Sign in to leave feedback.
Progress Indicator
A navigation bar with animated progress indicator built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a thin progress bar at the top showing profile completion percentage, a logo, nav links, a completion status label, and a Complete Profile call-to-action button, all animated with framer-motion.
Quick Actions
A navigation bar with quick action dropdown built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a plus icon that opens a dropdown with New Project, New Document, Import File, and Invite Member actions, each with an icon and keyboard shortcut hint. Inspired by GitHub's create menu.