/shadcn-ui-sidebar

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

Primary LanguageTypeScriptMIT LicenseMIT

shadcn/ui sidebar · Author Salimi

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

  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

Light mode

Dark mode

Dark mode

Mini sidebar

Mini sidebar

Sheet menu