WooodHead / shadcn-ui-sidebar

A stunning, functional and responsive retractable sidebar for Next.js built on top of shadcn/ui.

shadcn/ui sidebar ·

A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness.

Features

• Retractable mini and wide sidebar
• Scrollable sidebar menu
• Sheet menu for mobile
• Grouped menu with labels
• Collapsible submenu
• Extracted menu items list

Tech/framework used

• Next.js 14
• Shadcn/ui
• Tailwind CSS
• TypeScript
• Zustand

Starting the project locally

1. Clone the repository

   git clone https://github.com/salimi-my/shadcn-ui-sidebar

2. Install dependencies

   cd shadcn-ui-sidebar
   npm install

3. Run the development server

   npm run dev

Demo

The app is hosted on Vercel. Click here to visit.
Direct demo link: https://shadcn-ui-sidebar.salimi.my

Screenshots

Light mode

Dark mode

Mini sidebar

Sheet menu