Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/salimi-my/shadcn-ui-sidebar
A stunning, functional and responsive retractable sidebar for Next.js built on top of shadcn/ui.
https://github.com/salimi-my/shadcn-ui-sidebar
admin-panel dashboard nextjs shadcn-ui sidebar tailwind
Last synced: 2 days ago
JSON representation
A stunning, functional and responsive retractable sidebar for Next.js built on top of shadcn/ui.
- Host: GitHub
- URL: https://github.com/salimi-my/shadcn-ui-sidebar
- Owner: salimi-my
- License: mit
- Created: 2024-05-02T16:21:47.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-11-19T06:41:05.000Z (2 months ago)
- Last Synced: 2025-01-16T20:09:08.828Z (9 days ago)
- Topics: admin-panel, dashboard, nextjs, shadcn-ui, sidebar, tailwind
- Language: TypeScript
- Homepage: https://shadcn-ui-sidebar.salimi.my
- Size: 1.46 MB
- Stars: 1,396
- Watchers: 8
- Forks: 179
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [shadcn/ui sidebar](https://shadcn-ui-sidebar.salimi.my) · [](https://www.salimi.my)
A stunning and functional retractable sidebar for Next.js built on top of [shadcn/ui](https://ui.shadcn.com) 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.
```bash
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
```tsx
//layout.tsx
import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout";
export default async function Layout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return {children};
}
//page.tsx
import { ContentLayout } from "@/components/admin-panel/content-layout";
export default function Page() {
return (
Test
);
}
```
## Starting the project locally
1. Clone the repository
```bash
git clone https://github.com/salimi-my/shadcn-ui-sidebar
```
2. Install dependencies
```bash
cd shadcn-ui-sidebar
npm install
```
3. Run the development server
```bash
npm run dev
```
## Demo
The app is hosted on Vercel. [Click here](https://shadcn-ui-sidebar.salimi.my) to visit.
Direct demo link: `https://shadcn-ui-sidebar.salimi.my`
## Screenshots
#### Light mode
#### Dark mode
#### Mini sidebar
#### Sheet menu
