shadcn-ui-sidebar
A stunning, functional and responsive retractable sidebar for Next.js built on top of shadcn/ui.
MIT License
Stars
1K
Committers
6
Ecosystems:
Next,
Tailwind CSS
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
Installation
Custom registry
If you are using @shadcn/ui 2.0.0 or later, you can install the component directly from the registry.
npx shadcn@latest add https://raw.githubusercontent.com/salimi-my/shadcn-ui-sidebar/refs/heads/master/public/registry/shadcn-sidebar.json
or
npx shadcn@latest add https://shadcn-ui-sidebar.salimi.my/registry/shadcn-sidebar.json
Usage example for Nextjs
//layout.tsx
import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout";
export default async function Layout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <AdminPanelLayout>{children}</AdminPanelLayout>;
}
//page.tsx
import { ContentLayout } from "@/components/admin-panel/content-layout";
export default function Page() {
return (
<ContentLayout title="Test">
<div>Test</div>
</ContentLayout>
);
}
Starting the project locally
-
Clone the repository
git clone https://github.com/salimi-my/shadcn-ui-sidebar -
Install dependencies
cd shadcn-ui-sidebar npm install -
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
Badges
Extracted from project README