Layout

AdminLTE React ships a complete dashboard shell plus the lower-level pieces it is built from. Most apps only use <DashboardLayout> and <AppContent>; the individual parts are exported for when you need to assemble a custom shell.

The three layout components

• <DashboardLayout> — the main app shell (RSC outer wrapper). Renders the topbar, sidebar, footer and command palette, and mounts the color-mode / sidebar / palette / link providers. See Configuration for its props.
• <AuthLayout> — a standalone, centered layout for auth pages. Prop authType?: 'login' | 'register', plus logo and logoHref.
• <AppContent> — wraps each page's body with a content header (title + breadcrumbs) and the app-content container.

AppContent — page wrapper

Use it at the top of every dashboard page. It renders the AdminLTE content header and breadcrumb trail, then your content:

// app/(dashboard)/page.tsx
import { AppContent, SmallBox, Card } from '@adminlte/react'

export default function Dashboard() {
  return (
    <AppContent
      title="Dashboard"
      breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Dashboard' }]}
    >
      <div className="row">
        <div className="col-lg-3 col-6">
          <SmallBox
            title="53"
            text="New Orders"
            theme="primary"
            icon={<i className="bi bi-bag-check"></i>}
            url="#"
          />
        </div>
      </div>

      <Card title="Sales" theme="primary">Monthly revenue summary…</Card>
    </AppContent>
  )
}

AppContent props

Lower-level shell pieces

The shell is assembled from these exported components. You only touch them to build a custom layout — DashboardLayout wires them up for you:

• Topbar — the app-header navbar with the sidebar toggle, optional fullscreen and color-mode toggles, and the user menu.
• Sidebar, SidebarBrand, SidebarNav, SidebarNavItem (recursive), SidebarOverlay — the brand, the recursive menu tree and the mobile off-canvas overlay.
• Footer — the app footer.
• ColorModeToggle — the standalone light/dark toggle button.

Custom topbar slots

Inject your own nav items into either end of the topbar with topbarStart / topbarEnd — perfect for dropdown widgets like notifications and messages:

import { DashboardLayout, NavMessages, NavNotifications } from '@adminlte/react'

<DashboardLayout
  menuItems={menuItems}
  topbarEnd={
    <>
      <NavMessages messages={messages} badgeColor="danger" />
      <NavNotifications notifications={notes} count={15} badgeColor="warning" />
    </>
  }
>
  {children}
</DashboardLayout>