Components
The library exports 30+ typed components across layout, widgets, forms and tools. Presentational components are Server Components; interactive ones (charts, datatable, the form plugins, modal) are client components loaded — where heavy — via dynamic import().
Layout
DashboardLayout, AuthLayout, AppContent, plus the lower-level Topbar, Sidebar, SidebarBrand, SidebarNav, SidebarNavItem, SidebarOverlay, Footer and ColorModeToggle. See Layout.
Widgets
| Component | Key props |
|---|---|
Card | title, icon, theme, variant (default/outline/solid), collapsible, removable, maximizable, footer, tools, bodyClass |
SmallBox | title, text, theme, icon (ReactNode), url, urlText |
InfoBox | title, text, icon, theme, progress, progressText |
Alert | theme, title, icon, dismissable |
Callout | theme, title |
Progress / ProgressGroup | value, theme / labeled group |
Ratings | value, max, theme |
ProfileCard / DescriptionBlock | user card with social links / label-value block |
Timeline | chronological timeline |
Badge, Avatar / AvatarGroup, Spinner | theme, pill / image-or-initials, status dot / status label |
Breadcrumb, Pagination, Stepper | data-driven nav / controlled windowed pager / wizard stepper |
Table | columns, data, rowKey, striped, hover, responsive |
ListGroup / ListGroupItem | renders <a>/<button>/<div> by props; active, theme |
Dropdown, Carousel | Bootstrap-JS-driven menu / slider |
Accordion, Tabs | state-driven panels & tabs (no Bootstrap JS needed) |
Toast, Tooltip | controlled toast / hover-focus tooltip |
NavMessages / NavNotifications / NavTasks | topbar dropdown widgets |
DirectChat | chat widget with contacts pane |
CommandPalette | ⌘K palette (+ flattenMenuToCommands) |
ApexChart / SparklineChart / WorldMap | ApexCharts / jsVectorMap (dynamic import) — see Charts |
Forms
Button, Input, Textarea, Select, InputSwitch, InputColor, InputFile, plus the dynamic-import plugins InputFlatpickr (date/time) and InputTomSelect (searchable/multi-select). Text inputs support label, hint and error with Bootstrap validation classes.
Tools
Modal (Bootstrap dialog), Datatable (Tabulator, dynamic import), Editor (Quill rich text, dynamic import).
Usage snippets
import { Card, SmallBox, InfoBox } from '@adminlte/react'
// A collapsible, outline-themed card
<Card title="Sales" icon="bi bi-graph-up" theme="primary" variant="outline" collapsible>
Monthly revenue summary…
</Card>
// Stat boxes
<SmallBox title="150" text="New orders" theme="primary"
icon={<i className="bi bi-bag"></i>} url="#" />
<InfoBox text="Bookmarks" title="41,410" icon="bi-bookmark"
theme="info" progress={70} progressText="70% increase in 30 days" />import { Alert, Button, Input } from '@adminlte/react'
<Alert theme="success" icon="bi-check-circle" title="Saved! " dismissable>
Your changes were stored.
</Alert>
// A labelled input with validation, and a themed button
<Input name="email" type="email" label="Email"
placeholder="you@example.com" hint="We never share it." />
<Button theme="primary" icon="bi-save" label="Save" type="submit" />Color props are named theme (a Bootstrap variant: primary, secondary, success, info, warning, danger, light, dark). Card takes variant (default / outline / solid) for how the theme color is applied. SmallBox's icon is a ReactNode (pass a full <i>), while most other components take an icon class string.