Layout & Shell

DashboardLayout is the app shell. AuthLayout covers standalone auth pages. AppContent wraps the content of every page.

DashboardLayout

The main application shell. It is a React Server Component: it computes the static <body> layout classes on the server, then nests the client providers (color mode, sidebar, command palette) and renders the topbar, sidebar, footer, and command palette around children. Use it once, in the layout.tsx of your dashboard route group.

tsx

<DashboardLayout
  menuItems={menuItems}
  fixedHeader
  fixedSidebar
  sidebarMini
  colorModeToggle
  initialColorMode="auto"
>
  {children}
</DashboardLayout>

Props

Prop	Type	Default	Description
`menuItems`required	`MenuNode[]`	—	Drives the sidebar tree and the command palette.
`children`required	`React.ReactNode`	—	Page content (usually an AppContent).
`logo`	`React.ReactNode`	`<b>Admin</b>LTE`	Brand content, or a string image src.
`logoHref`	`string`	`'/'`	Link target for the brand.
`user`	`TopbarUser`	—	Signed-in user shown in the topbar dropdown.
`sidebarTheme`	`'light' \| 'dark'`	`'dark'`	Sidebar color scheme.
`sidebarClass`	`string`	`'bg-body-secondary shadow'`	Extra classes on the sidebar element.
`sidebarBreakpoint`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	`'lg'`	Below this width the sidebar becomes an off-canvas overlay ('lg' = 992px, otherwise 768px).
`sidebarMini`	`boolean`	`false`	Collapse to an icon-only mini sidebar.
`fixedHeader`	`boolean`	`false`	Pin the topbar to the top.
`fixedSidebar`	`boolean`	`false`	Make the sidebar independently scrollable.
`fixedFooter`	`boolean`	`false`	Pin the footer to the bottom.
`colorModeToggle`	`boolean`	`true`	Show the light/dark toggle in the topbar.
`initialColorMode`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Starting color mode before any saved preference loads.
`dir`	`'ltr' \| 'rtl'`	—	Sets the document direction (enables RTL).
`enableSidebarPersistence`	`boolean`	`false`	Persist the collapsed state to localStorage.
`navbarClass`	`string`	—	Extra classes on the topbar navbar.
`bodyClass`	`string`	—	Extra classes merged onto <body>.
`topbarStart`	`React.ReactNode`	—	Custom nav items rendered at the start of the topbar.
`topbarEnd`	`React.ReactNode`	—	Custom nav items (e.g. NavMessages) before the user menu.
`footer`	`React.ReactNode`	—	Footer content.

Layout flags

The fixed*, sidebarMini, and dir props map to the same <body>classes AdminLTE's CSS expects (fixed-header, fixed-sidebar, fixed-footer, sidebar-mini, …). The shell always applies layout-fixed and sidebar-expand-{breakpoint}. You can mix and match freely.

AuthLayout

A standalone, centered layout for login and registration screens. It applies the {authType}-page body classes via effect, so it composes cleanly under a Next.js root layout that already owns <html> / <body>. Put auth routes in their own route group so they do not inherit DashboardLayout.

app/(auth)/login/page.tsx

import { AuthLayout, Input, Button } from 'adminlte-react'

export default function LoginPage() {
  return (
    <AuthLayout authType="login">
      <p className="login-box-msg">Sign in to start your session</p>
      <form>
        <Input type="email" placeholder="Email" />
        <Input type="password" placeholder="Password" />
        <Button type="submit" label="Sign In" />
      </form>
    </AuthLayout>
  )
}

Props

Prop	Type	Default	Description
`authType`	`'login' \| 'register'`	`'login'`	Selects the page/box/card-body class prefix.
`logo`	`React.ReactNode`	`<b>Admin</b>LTE`	Brand shown above the card.
`logoHref`	`string`	`'/'`	Link target for the brand.
`children`required	`React.ReactNode`	—	Form / card body content.

AppContent

Wraps the content of a single page. It renders the optional page header (title + breadcrumbs) and the correct AdminLTE content container. Use it as the top-level element of each page inside a DashboardLayout.

tsx

<AppContent
  title="Orders"
  breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Orders' }]}
>
  {/* page content */}
</AppContent>

Props

Prop	Type	Default	Description
`title`	`string`	—	Page heading shown in the content header.
`breadcrumbs`	`Array<{ label: string; href?: string }>`	—	Breadcrumb trail; the last item renders as active.
`fluid`	`boolean`	`true`	Use a fluid container (false → container-lg).
`children`required	`React.ReactNode`	—	Page content.

The header only renders when title or breadcrumbs is provided.

DashboardLayout is the app shell. AuthLayout covers standalone auth pages. AppContent wraps the content of every page.

DashboardLayout

tsx

<DashboardLayout
  menuItems={menuItems}
  fixedHeader
  fixedSidebar
  sidebarMini
  colorModeToggle
  initialColorMode="auto"
>
  {children}
</DashboardLayout>

Props

Prop	Type	Default	Description
`menuItems`required	`MenuNode[]`	—	Drives the sidebar tree and the command palette.
`children`required	`React.ReactNode`	—	Page content (usually an AppContent).
`logo`	`React.ReactNode`	`<b>Admin</b>LTE`	Brand content, or a string image src.
`logoHref`	`string`	`'/'`	Link target for the brand.
`user`	`TopbarUser`	—	Signed-in user shown in the topbar dropdown.
`sidebarTheme`	`'light' \| 'dark'`	`'dark'`	Sidebar color scheme.
`sidebarClass`	`string`	`'bg-body-secondary shadow'`	Extra classes on the sidebar element.
`sidebarBreakpoint`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	`'lg'`	Below this width the sidebar becomes an off-canvas overlay ('lg' = 992px, otherwise 768px).
`sidebarMini`	`boolean`	`false`	Collapse to an icon-only mini sidebar.
`fixedHeader`	`boolean`	`false`	Pin the topbar to the top.
`fixedSidebar`	`boolean`	`false`	Make the sidebar independently scrollable.
`fixedFooter`	`boolean`	`false`	Pin the footer to the bottom.
`colorModeToggle`	`boolean`	`true`	Show the light/dark toggle in the topbar.
`initialColorMode`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Starting color mode before any saved preference loads.
`dir`	`'ltr' \| 'rtl'`	—	Sets the document direction (enables RTL).
`enableSidebarPersistence`	`boolean`	`false`	Persist the collapsed state to localStorage.
`navbarClass`	`string`	—	Extra classes on the topbar navbar.
`bodyClass`	`string`	—	Extra classes merged onto <body>.
`topbarStart`	`React.ReactNode`	—	Custom nav items rendered at the start of the topbar.
`topbarEnd`	`React.ReactNode`	—	Custom nav items (e.g. NavMessages) before the user menu.
`footer`	`React.ReactNode`	—	Footer content.

Layout flags

AuthLayout

app/(auth)/login/page.tsx

import { AuthLayout, Input, Button } from 'adminlte-react'

export default function LoginPage() {
  return (
    <AuthLayout authType="login">
      <p className="login-box-msg">Sign in to start your session</p>
      <form>
        <Input type="email" placeholder="Email" />
        <Input type="password" placeholder="Password" />
        <Button type="submit" label="Sign In" />
      </form>
    </AuthLayout>
  )
}

Props

Prop	Type	Default	Description
`authType`	`'login' \| 'register'`	`'login'`	Selects the page/box/card-body class prefix.
`logo`	`React.ReactNode`	`<b>Admin</b>LTE`	Brand shown above the card.
`logoHref`	`string`	`'/'`	Link target for the brand.
`children`required	`React.ReactNode`	—	Form / card body content.

AppContent

tsx

<AppContent
  title="Orders"
  breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Orders' }]}
>
  {/* page content */}
</AppContent>

Props

Prop	Type	Default	Description
`title`	`string`	—	Page heading shown in the content header.
`breadcrumbs`	`Array<{ label: string; href?: string }>`	—	Breadcrumb trail; the last item renders as active.
`fluid`	`boolean`	`true`	Use a fluid container (false → container-lg).
`children`required	`React.ReactNode`	—	Page content.

The header only renders when title or breadcrumbs is provided.

Brad Diesel

John Pierce

Nora Silvester

DashboardLayout

Props

Layout flags

AuthLayout

Props

AppContent

Props

Brad Diesel

John Pierce

Nora Silvester

Layout & Shell

DashboardLayout

Props

Layout flags

AuthLayout

Props

AppContent

Props