Three steps: define your menu, wrap your route group in DashboardLayout, then build pages with AppContent.
1. Define your menu
The whole sidebar — and the ⌘K command palette — is driven by a single MenuNode[] array. A node is a header (section label), an item (link), or a group (collapsible submenu).
lib/menu.ts
import type { MenuNode } from 'adminlte-react'
export const menuItems: MenuNode[] = [
{
type: 'group',
text: 'Dashboard',
icon: 'bi-speedometer',
children: [
{ type: 'item', text: 'Dashboard v1', href: '/', icon: 'bi-circle' },
{ type: 'item', text: 'Dashboard v2', href: '/index2', icon: 'bi-circle' },
],
},
{ type: 'header', text: 'UI ELEMENTS' },
{ type: 'item', text: 'Profile', href: '/profile', icon: 'bi-person' },
{
type: 'item',
text: 'Inbox',
href: '/mailbox',
icon: 'bi-envelope',
badge: 12,
badgeColor: 'primary',
},
]2. Wrap your routes in the layout
Put a layout.tsx in the route group that should render the dashboard shell. DashboardLayout renders the topbar, sidebar, footer, and command palette around your pages.
app/(dashboard)/layout.tsx
import { DashboardLayout } from 'adminlte-react'
import { menuItems } from '@/lib/menu'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<DashboardLayout
menuItems={menuItems}
logo={<><b>Admin</b>LTE</>}
fixedHeader
fixedSidebar
colorModeToggle
user={{
name: 'Jane Doe',
image: '/avatar.png',
role: 'Administrator',
}}
>
{children}
</DashboardLayout>
)
}3. Build a page
Wrap page content in AppContent to get the page header (title + breadcrumbs) and the correct content container. Compose with widgets like SmallBox and Card.
app/(dashboard)/page.tsx
import { AppContent, SmallBox, Card } from 'adminlte-react'
export default function DashboardPage() {
return (
<AppContent
title="Dashboard"
breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Dashboard' }]}
>
<div className="row g-4">
<div className="col-lg-3 col-6">
<SmallBox
title="150"
text="New Orders"
theme="primary"
icon={<i className="bi bi-bag" />}
url="/orders"
/>
</div>
<div className="col-lg-9">
<Card title="Sales" theme="primary" variant="outline" collapsible>
Your chart or table goes here.
</Card>
</div>
</div>
</AppContent>
)
}That's it
You now have a working dashboard with a responsive sidebar, dark-mode toggle, and a ⌘K command palette generated from your menu. From here:
- Tune the shell — fixed header/sidebar/footer, mini sidebar, RTL — on the Layout & Shell page.
- Customize colors and dark mode on the Theming & Dark Mode page.
- Browse every component in the API Reference.