A modern React/Next.js component library for building admin dashboards and web applications with AdminLTE 4 styling and Bootstrap 5.3 — built for the Next.js App Router and React Server Components by Colorlib.
Status: v0.1.0 (Early Release) · Live demo: adminlte.io/themes/next-react
Available for your stack — the same AdminLTE 4 dashboard, in the framework you know best:
Frameworks: React · Next.js · Vue · Nuxt · Laravel · Django
Documentation: Full guides and an API reference for every component, hook, and context live in the demo app under
/docs. Runpnpm demoand open/docs/introduction. A condensed reference follows below, and the release history is in the CHANGELOG.
- ✨ React Server Components (RSC) - Server-first; only interactive parts ship as client components
- 📦 No required runtime dependencies - Beyond the React/Next peers; nothing extra forced into your bundle
- 🎨 Pre-built Components - 30+ components across layout, widgets, forms, and tools
- 🌙 Dark Mode Support - Light/Dark/Auto, driven by Bootstrap's
data-bs-theme - ♿ Accessible - Semantic markup, ARIA landmarks, keyboard navigation
- 🎯 TypeScript First - Fully typed props, hooks, and the menu data model
- 📱 Responsive - Mobile-first Bootstrap 5.3 design with an off-canvas sidebar
- 🔌 Lazy plugins - ApexCharts, Tabulator, Quill, Flatpickr, Tom Select & jsVectorMap load on demand
npm install adminlte-react
# or
pnpm add adminlte-reactnpm install react react-dom nextreact and react-dom (18+) are required. Next.js 14+ is required in practice — the
sidebar uses next/navigation for active-link detection and the command palette uses the
Next router. You also need Bootstrap 5.3 JavaScript (for dropdowns, modals, tooltips,
toasts) and Bootstrap Icons (the components use bi-* classes); load both from a CDN
or install them:
npm install bootstrap bootstrap-iconsInstall only the libraries for the lazy components you use:
npm install apexcharts # <ApexChart>, <SparklineChart>
npm install tabulator-tables # <Datatable>
npm install quill # <Editor>
npm install flatpickr # <InputFlatpickr>
npm install tom-select # <InputTomSelect>
npm install jsvectormap # <WorldMap>
npm install sortablejs # useSortable()Each also needs its own CSS loaded once. See the Plugins & Dynamic Imports docs page for the full matrix.
// app/layout.tsx
import 'adminlte-react/css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import './globals.css'
export const metadata = {
title: 'Dashboard',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css"
/>
</head>
<body>
{children}
{/* Bootstrap JS required for dropdowns, modals, etc */}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
)
}// app/(dashboard)/layout.tsx
import { DashboardLayout } from 'adminlte-react'
import { menuItems } from '@/lib/menu'
export default function Layout({ children }) {
return (
<DashboardLayout
menuItems={menuItems}
fixedHeader
fixedSidebar
colorModeToggle
>
{children}
</DashboardLayout>
)
}// 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: 'header',
text: 'UI ELEMENTS',
},
{
type: 'item',
text: 'Profile',
href: '/profile',
icon: 'bi-person',
},
]// app/(dashboard)/page.tsx
import { AppContent, SmallBox, Card, Progress } 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>
<div className="row mt-4">
<div className="col-md-6">
<Card title="Sales Chart" theme="primary">
{/* Your chart here */}
</Card>
</div>
</div>
</AppContent>
)
}DashboardLayout- Main app shell (RSC) with sidebar, topbar, footer & command paletteAuthLayout- Standalone auth page layout (login, register)AppContent- Page content wrapper with title and breadcrumbs- Lower-level pieces are also exported:
Topbar,Sidebar,SidebarBrand,SidebarNav,SidebarNavItem,SidebarOverlay,Footer,ColorModeToggle
SmallBox- Colored stat tile with footer linkInfoBox- Metric widget with optional progress barCard- Collapsible / maximizable / removable card containerAlert- Alert message with optional icon, title & dismissCallout- Highlighted informational blockProgress/ProgressGroup- Single bar / labeled groupRatings- Star ratings displayProfileCard- User profile card with social linksDescriptionBlock- Label/value blocksTimeline- Chronological timelineNavMessages/NavNotifications/NavTasks- Topbar dropdown widgetsDirectChat- Chat widget with contacts paneApexChart/SparklineChart- ApexCharts wrappers (dynamic import)WorldMap- jsVectorMap world map (dynamic import)CommandPalette- ⌘K searchable navigator (+flattenMenuToCommandshelper)Accordion/Tabs- Collapsible panels & tab/pill switcher (state-driven, no Bootstrap JS)Toast/Tooltip- Controlled toast notification & hover/focus tooltip
Button- Themed button with variants, sizes, iconInput/Textarea- Text inputs with label, hint & errorSelect- Dropdown select (options or children)InputSwitch- Toggle switchInputColor- Native color pickerInputFile- File input (single/multiple)InputFlatpickr- Date/time picker (dynamic import)InputTomSelect- Searchable / multi-select (dynamic import)
Modal- Bootstrap modal dialogDatatable- Data grid with Tabulator (dynamic import)Editor- Rich text editor with Quill (dynamic import)
DashboardLayout provides three contexts. Each has a hook (use them in client components):
useSidebarContext()→{ isCollapsed, isMobileOpen, isMiniMode, toggle, collapse, expand, sidebarBreakpoint }useColorModeContext()→{ colorMode, setColorMode, resolvedMode }useCommandPalette()→{ isOpen, open, close, toggle }(orundefinedoutside the provider)
Standalone hooks:
usePushMenu(options?)- Sidebar state machine (used bySidebarProvider)useCardWidget(initialCollapsed?)- Card collapse / maximize / remove stateuseDirectChat()- Toggle the chat contacts paneuseFullscreen()- Fullscreen API wrapperuseTreeviewAnimation(isOpen, speed?)- Animate a collapsible<ul>heightuseSortable(enabled?)- Drag-and-drop on.connectedSortablelists (SortableJS)
'use client'
import { useSidebarContext, useColorModeContext } from 'adminlte-react'
function Toolbar() {
const { toggle } = useSidebarContext()
const { setColorMode } = useColorModeContext()
return (
<>
<button onClick={toggle}>Toggle sidebar</button>
<button onClick={() => setColorMode('dark')}>Dark mode</button>
</>
)
}All components use Bootstrap 5.3 utility classes. Customize via CSS variables or override classes:
:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
/* ... other variables */
}Full TypeScript support with exported types:
import type { DashboardLayoutProps, MenuNode, BootstrapTheme } from 'adminlte-react'
const props: DashboardLayoutProps = {
menuItems: [],
colorModeToggle: true,
}Dark mode is handled automatically by ColorModeProvider (inside DashboardLayout). It sets data-bs-theme on <html>, resolves auto from prefers-color-scheme, and persists the user's choice in localStorage under the key lte-theme.
Set the starting mode with initialColorMode on DashboardLayout, or mount the provider directly:
<ColorModeProvider initialMode="dark">
{children}
</ColorModeProvider>Components are built with accessibility in mind:
- Semantic HTML and ARIA landmarks
- Keyboard navigation (including the ⌘K command palette)
- Focus management
- Reduced-motion friendly animations
Modern evergreen browsers — latest Chrome, Firefox, Safari, and Edge.
- RSC-optimized - Presentational components render on the server; only interactive parts hydrate
- Lazy plugins - Chart, map, datatable, editor, and advanced form libraries load on demand via dynamic
import() - CSS-in-JS free - Plain Bootstrap classes and CSS variables
- Tree-shakeable - ESM build with
sideEffectsscoped to the stylesheet, so unused components are dropped
Contributions are welcome! Open an issue or pull request on
GitHub. Build the library with
pnpm build and run pnpm type-check before submitting.
Need advanced features, more pages, and dedicated support? Explore Colorlib's collection of professional admin templates on DashboardPack.
Apex Dashboard Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. 5 dashboard variants, 20+ app pages, 125+ routes, full CRUD. |
Zenith Dashboard Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. Achromatic design, 50+ pages, 6 dashboards, live theme customizer. |
Haze Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer. |
TailPanel React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes. |
Admindek Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets. |
SvelteForge Premium SvelteKit + Tailwind CSS v4. 30+ wired-up modules, multi-tenant from row zero, dark/light/system mode. |
MIT © Colorlib
For issues, feature requests, or questions: