@rqdhw3n/react-admin-layout

Production-ready admin dashboard layout for React — sidebar, navbar, dark mode, breadcrumbs, RBAC, mobile drawer.

Features

• Responsive collapsible sidebar
• Mobile drawer menu
• Top navbar with search, notifications, user menu
• Breadcrumbs + auto-generation from route path
• Dark mode with localStorage persistence
• RBAC permission filtering on sidebar items
• React Router support (optional peer)
• Tailwind CSS — modern SaaS aesthetic
• Full TypeScript

Install

npm install @rqdhw3n/react-admin-layout lucide-react
# optional for routing
npm install react-router-dom

Styles (required)

import '@rqdhw3n/react-admin-layout/style.css'

Works with Vite, Next.js (app/layout.tsx or _app.tsx), and CRA.

Next.js

// app/layout.tsx
import '@rqdhw3n/react-admin-layout/style.css'

Tailwind in your app

If you use Tailwind v3+, add the package to content:

content: [
  './src/**/*.{js,ts,jsx,tsx}',
  './node_modules/@rqdhw3n/react-admin-layout/dist/**/*.js',
],

Basic usage

import { AdminLayout, type SidebarItemType } from '@rqdhw3n/react-admin-layout'
import '@rqdhw3n/react-admin-layout/style.css'
import { Home, Users } from 'lucide-react'

const sidebarItems: SidebarItemType[] = [
  { label: 'Dashboard', icon: Home, path: '/dashboard' },
  {
    label: 'Users',
    icon: Users,
    children: [
      { label: 'List', path: '/users' },
      { label: 'Create', path: '/users/create', permission: 'users.create' },
    ],
  },
]

export default function App() {
  return (
    <AdminLayout
      sidebarItems={sidebarItems}
      appName='My Admin'
      user={{ name: 'Amine', email: '[email protected]' }}
      permissions={{ users: ['view', 'create'] }}
      activePath='/dashboard'
    >
      <YourPage />
    </AdminLayout>
  )
}

React Router

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { AdminLayout, RouterLink } from '@rqdhw3n/react-admin-layout'

function App() {
  return (
    <BrowserRouter>
      <AdminLayout
        enableRouter
        LinkComponent={RouterLink}
        sidebarItems={items}
        appName='My Admin'
      >
        <Routes>
          <Route path='/dashboard' element={<Dashboard />} />
        </Routes>
      </AdminLayout>
    </BrowserRouter>
  )
}

Hooks

| Hook | Description | |------|-------------| | useSidebar() | Collapsed state, mobile drawer | | useDarkMode() | Theme toggle | | useLayoutState() | Full layout context | | useBreadcrumbs() | Breadcrumb items |

Components

AdminLayout · Sidebar · SidebarItem · SidebarGroup · Navbar · NavbarSearch · UserMenu · NotificationMenu · Breadcrumbs · Footer · MobileSidebar · ThemeToggle · RouterLink

RBAC

permissions={{ users: ['view', 'create'], roles: ['view'] }}

// sidebar item
{ label: 'Create', path: '/users/create', permission: 'users.create' }

Examples

• examples/basic/App.example.tsx
• examples/dark-mode/App.example.tsx
• examples/sidebar-collapse/App.example.tsx

Build (library)

npm install
npm run build

Outputs:

• dist/index.js (ESM)
• dist/index.cjs (CJS)
• dist/index.d.ts
• dist/style.css

Peer dependencies

• react >= 18
• react-dom >= 18
• lucide-react >= 0.400
• react-router-dom >= 6 (optional)

License

MIT