shadcn ui sidebar

sidebar shadcn/ui ·

Sidebar yang dapat ditarik kembali yang menakjubkan dan fungsional untuk Next.js dibangun di atas shadcn/ui lengkap dengan desktop dan respon seluler.

Fitur

• Mini mini dan sidebar yang dapat ditarik
• Menu sidebar yang dapat digulir
• Menu lembar untuk ponsel
• Menu dikelompokkan dengan label
• Submenu yang dapat dilipat
• Daftar Item Menu Diekstraksi

Tech/Framework Digunakan

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

Instalasi

Registri Kustom

Jika Anda menggunakan @shadcn/UI 2.0.0 atau lebih baru, Anda dapat menginstal komponen langsung dari registri.

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

Contoh Penggunaan untuk 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 >
  ) ;
} 

Memulai proyek secara lokal

1. Klon Repositori

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

2. Instal dependensi

    cd shadcn-ui-sidebar
   npm install

3. Jalankan server pengembangan

   npm run dev

Demo

Aplikasi ini di -host di Vercel. Klik di sini untuk mengunjungi.
Tautan demo langsung: https://shadcn-ui-sidebar.salimi.my

Tangkapan layar

Mode Cahaya

Mode gelap

Mini Sidebar

Menu lembar