Widgets

Presentational building blocks for dashboards. Most are Server Components; interactive ones are noted.

On this page

SmallBox
InfoBox
Card
Alert
Callout
Progress
ProgressGroup
Ratings
ProfileCard
DescriptionBlock
Timeline
NavMessages / NavNotifications / NavTasks
DirectChat
ApexChart / SparklineChart
WorldMap
CommandPalette

SmallBox

A colored stat tile with a value, label, icon, and optional footer link.

150

New Orders

More info

53%

Bounce Rate

More info

tsx

<SmallBox title="150" text="New Orders" theme="primary" icon={<i className="bi bi-bag" />} url="#" />

Prop	Type	Default	Description
`title`required	`React.ReactNode`	—	The large value.
`text`	`string`	—	Label beneath the value.
`icon`	`React.ReactNode`	—	Decorative corner icon.
`theme`	`BootstrapTheme`	`'primary'`	Background color.
`url`	`string`	—	Footer link target.
`urlText`	`string`	`'More info'`	Footer link text.

InfoBox

A compact metric widget with an icon and an optional progress bar.

1,410Messages

410Bookmarks

70% increase

tsx

<InfoBox title="Bookmarks" text="410" icon="bi-bookmark" theme="danger" progress={70} progressText="70% increase" />

Prop	Type	Default	Description
`title`	`string`	—	Metric label.
`text`	`string`	—	Metric value.
`icon`	`string`	—	Bootstrap Icons class (e.g. bi-envelope).
`theme`	`BootstrapTheme`	`'info'`	Icon background color.
`progress`	`number`	—	If set (0–100), renders a progress bar.
`progressText`	`string`	—	Caption under the progress bar.

Card client

A container with header, body, and footer. Supports three color treatments via variant (default, outline, solid) and built-in collapse / maximize / remove tools.

Collapsible card

The body of the card. Use the tools in the header to collapse or maximize it.

tsx

<Card title="Sales" theme="primary" variant="outline" collapsible maximizable>
  The body of the card.
</Card>

Prop	Type	Default	Description
`children`required	`React.ReactNode`	—	Card body content.
`title`	`string`	—	Header title.
`icon`	`string`	—	Bootstrap Icons class shown in the header.
`theme`	`BootstrapTheme`	—	Applies the color treatment.
`variant`	`'default' \| 'outline' \| 'solid'`	`'default'`	Colored header, colored top border, or fully colored card.
`collapsible`	`boolean`	—	Show the collapse tool.
`defaultCollapsed`	`boolean`	—	Start collapsed.
`maximizable`	`boolean`	—	Show the maximize tool.
`removable`	`boolean`	—	Show the remove tool.
`tools`	`React.ReactNode`	—	Extra header tools.
`footer`	`React.ReactNode`	—	Footer content.
`bodyClass / headerClass / footerClass`	`string`	—	Section class overrides.
`className`	`string`	—	Class on the card element.
`outline`	`boolean`	—	Deprecated — use variant="outline".

Alert

A contextual message, optionally with an icon, title, and dismiss button.

Success!Your changes have been saved.

Heads up — double-check your input.

tsx

<Alert theme="success" title="Success!" icon="bi-check-circle" dismissable>
  Your changes have been saved.
</Alert>

Prop	Type	Default	Description
`children`required	`React.ReactNode`	—	Alert body.
`theme`	`BootstrapTheme`	`'info'`	Alert color.
`title`	`string`	—	Bold heading.
`icon`	`string`	—	Bootstrap Icons class.
`dismissable`	`boolean`	—	Render a close button.

Callout

A bordered, highlighted block for tips and notes.

Did you know?

Callouts are great for inline documentation notes.

tsx

<Callout theme="info" title="Did you know?">
  Callouts are great for inline documentation notes.
</Callout>

Prop	Type	Default	Description
`children`required	`React.ReactNode`	—	Callout body.
`theme`	`BootstrapTheme`	`'info'`	Accent color.
`title`	`string`	—	Heading.
`icon`	`string`	—	Bootstrap Icons class.

Progress

A single progress bar with optional stripes, animation, and label.

45%

tsx

<Progress value={45} theme="primary" showLabel />
<Progress value={80} theme="success" striped animated />

Prop	Type	Default	Description
`value`	`number`	`0`	Fill percentage (0–100).
`theme`	`BootstrapTheme`	`'primary'`	Bar color.
`striped`	`boolean`	—	Striped bar.
`animated`	`boolean`	—	Animate the stripes.
`height`	`string`	—	Track height (e.g. "1.5rem").
`showLabel`	`boolean`	—	Show the percentage inside the bar.

ProgressGroup

A labeled progress row with a value over a max.

Add Products to Cart80%

Complete Purchase78%

tsx

<ProgressGroup label="Add Products to Cart" value={160} max={200} color="primary" />

Prop	Type	Default	Description
`label`required	`string`	—	Row label.
`value`required	`number`	—	Current value.
`max`	`number`	`100`	Maximum value.
`color`	`BootstrapTheme`	`'primary'`	Bar color.
`showPercentage`	`boolean`	`true`	Show the computed percentage.

Ratings

A star rating display.

tsx

<Ratings value={4} />
<Ratings value={3} max={5} color="danger" />

Prop	Type	Default	Description
`value`required	`number`	—	Number of filled stars.
`max`	`number`	`5`	Total stars.
`color`	`BootstrapTheme`	`'warning'`	Star color.
`readonly`	`boolean`	`true`	Display-only (no interaction).
`className`	`string`	—	Wrapper class.

A user profile card with avatar, title, description, and social links.

Nina Mcintire

Software Engineer

UI/UX, design systems, and front-end performance.

tsx

<ProfileCard
  name="Nina Mcintire"
  title="Software Engineer"
  description="UI/UX and front-end performance."
  socials={[{ icon: 'bi-github', url: '#', label: 'GitHub' }]}
/>

Prop	Type	Default	Description
`name`required	`string`	—	Display name.
`title`	`string`	—	Role / subtitle.
`image`	`string`	—	Avatar image src.
`imageAlt`	`string`	`'User'`	Avatar alt text.
`description`	`string`	—	Short bio.
`socials`	`Array<{ icon: string; url: string; label?: string }>`	—	Social links.
`children`	`React.ReactNode`	—	Extra footer content.
`className`	`string`	—	Card class.

DescriptionBlock

A label/value block, useful for KPI strips and detail panes.

$35,210.43

Total Revenue

Order #4219

Customer: A. Pierce
Status: Shipped
Total: $120.00

tsx

<DescriptionBlock title="$35,210.43" text="Total Revenue" />
<DescriptionBlock title="Order #4219" items={{ Customer: 'A. Pierce', Status: 'Shipped' }} />

Prop	Type	Default	Description
`title`required	`string`	—	Primary heading / value.
`text`	`string`	—	Caption under the title.
`items`	`Record<string, string>`	—	Key/value pairs rendered as a list.
`className`	`string`	—	Wrapper class.

Timeline

A vertical, time-ordered list of events.

New message

Support replied to your ticket.

12:05

New user registered

09:30

tsx

<Timeline
  items={[
    { time: '12:05', icon: 'bi-envelope', iconTheme: 'primary', title: 'New message', body: 'Support replied.' },
    { time: '09:30', icon: 'bi-person', iconTheme: 'success', title: 'New user registered' },
  ]}
/>

Prop	Type	Default	Description
`items`required	`TimelineItem[]`	—	Events: { time, title, icon?, iconTheme?, body?, footer?, url? }.
`className`	`string`	—	Wrapper class.

Topbar dropdown widgets. Pass them to DashboardLayout's topbarEnd. Each shows a badge with the item count.

tsx

<DashboardLayout
  menuItems={menuItems}
  topbarEnd={
    <>
      <NavMessages
        messages={[{ from: 'Brad', text: 'Call me', time: '4h', star: 'danger' }]}
      />
      <NavNotifications
        notifications={[{ text: '5 new reports', icon: 'bi-file-earmark', time: '2d' }]}
        count={15}
      />
      <NavTasks tasks={[{ text: 'Design review', progress: 40, color: 'danger' }]} />
    </>
  }
>
  {children}
</DashboardLayout>

NavMessages props

Prop	Type	Default	Description
`messages`required	`NavMessage[]`	—	{ from, text, image?, url?, time?, star? }.
`badgeColor`	`BootstrapTheme`	`'danger'`	Badge color.
`count`	`number \| string`	—	Badge count (defaults to messages.length).
`seeAllUrl`	`string`	`'#'`	Footer link target.
`seeAllText`	`string`	`'See All Messages'`	Footer link text.

NavNotifications props

Prop	Type	Default	Description
`notifications`required	`NavNotification[]`	—	{ text, icon?, time?, url? }.
`badgeColor`	`BootstrapTheme`	`'danger'`	Badge color.
`count`	`number \| string`	—	Badge count (defaults to length).
`seeAllText`	`string`	`'See All Notifications'`	Footer link text.

NavTasks props

Prop	Type	Default	Description
`tasks`required	`NavTask[]`	—	{ text, progress, color?, url? }.
`badgeColor`	`BootstrapTheme`	`'warning'`	Badge color.
`seeAllText`	`string`	`'See All Tasks'`	Footer link text.

DirectChat client

A chat card with a message thread and a slide-in contacts pane.

tsx

<DirectChat
  badge={3}
  messages={[
    { from: 'Sarah', image: '/sarah.png', timestamp: '2:15', text: 'Hey there!' },
    { from: 'Me', image: '/me.png', timestamp: '2:16', text: 'Hi!', isOwn: true },
  ]}
  contacts={[{ name: 'Sarah', image: '/sarah.png', date: '1:30', preview: 'See you soon' }]}
/>

Prop	Type	Default	Description
`messages`	`DirectChatMessage[]`	`[]`	{ from, image, timestamp, text, isOwn? }.
`contacts`	`DirectChatContact[]`	`[]`	{ name, image, date, preview }.
`badge`	`number`	`0`	Unread badge in the header.
`collapsible`	`boolean`	`true`	Show the collapse tool.
`removable`	`boolean`	`true`	Show the remove tool.
`onRemove`	`() => void`	—	Called when removed.
`className`	`string`	—	Card class.

ApexChart / SparklineChart client

ApexCharts wrappers. ApexChart takes a full ApexCharts config; SparklineChart is a minimal inline chart from a number array. Both lazy-load apexcharts — see Plugins for the required CSS.

tsx

<ApexChart
  id="sales"
  series={[{ name: 'Sales', data: [30, 40, 35, 50, 49, 60] }]}
  config={{ chart: { type: 'line', height: 300 }, xaxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun'] } }}
/>

<SparklineChart id="spark" data={[5, 9, 7, 12, 10, 15]} />

Prop	Type	Default	Description
`id`required	`string`	—	Unique DOM id for the chart container.
`series`required	`any[]`	—	ApexCharts series (ApexChart only).
`config`required	`Record<string, any>`	—	ApexCharts options (ApexChart only).
`data`required	`number[]`	—	Data points (SparklineChart only).

WorldMap client

A vector world map powered by jsVectorMap (lazy-loaded).

tsx

<WorldMap id="visitors-map" height={260} />

Prop	Type	Default	Description
`id`required	`string`	—	Unique DOM id.
`height`	`number`	`220`	Map height in pixels.

CommandPalette client

A ⌘K / Ctrl+K searchable navigator. DashboardLayout already renders one built from your menuItems, so you usually don't mount it yourself. To build a custom set, use flattenMenuToCommands or supply your own CommandItem[].

tsx

import { CommandPalette, flattenMenuToCommands } from 'adminlte-react'

const items = flattenMenuToCommands(menuItems)
// items: { label, href, icon?, section? }[]

<CommandPalette items={items} placeholder="Jump to…" />

Prop	Type	Default	Description
`items`required	`CommandItem[]`	—	{ label, href, icon?, section? }.
`placeholder`	`string`	`'Search pages…'`	Search input placeholder.

flattenMenuToCommands(nodes) walks a MenuNode[] tree, skips placeholder links (href === '#'), and de-duplicates by href.

Presentational building blocks for dashboards. Most are Server Components; interactive ones are noted.

On this page

SmallBox
InfoBox
Card
Alert
Callout
Progress
ProgressGroup
Ratings
ProfileCard
DescriptionBlock
Timeline
NavMessages / NavNotifications / NavTasks
DirectChat
ApexChart / SparklineChart
WorldMap
CommandPalette

SmallBox

A colored stat tile with a value, label, icon, and optional footer link.

150

New Orders

More info

53%

Bounce Rate

More info

tsx

<SmallBox title="150" text="New Orders" theme="primary" icon={<i className="bi bi-bag" />} url="#" />

Prop	Type	Default	Description
`title`required	`React.ReactNode`	—	The large value.
`text`	`string`	—	Label beneath the value.
`icon`	`React.ReactNode`	—	Decorative corner icon.
`theme`	`BootstrapTheme`	`'primary'`	Background color.
`url`	`string`	—	Footer link target.
`urlText`	`string`	`'More info'`	Footer link text.

InfoBox

A compact metric widget with an icon and an optional progress bar.

1,410Messages

410Bookmarks

70% increase

tsx

<InfoBox title="Bookmarks" text="410" icon="bi-bookmark" theme="danger" progress={70} progressText="70% increase" />

Prop	Type	Default	Description
`title`	`string`	—	Metric label.
`text`	`string`	—	Metric value.
`icon`	`string`	—	Bootstrap Icons class (e.g. bi-envelope).
`theme`	`BootstrapTheme`	`'info'`	Icon background color.
`progress`	`number`	—	If set (0–100), renders a progress bar.
`progressText`	`string`	—	Caption under the progress bar.

Card client

A container with header, body, and footer. Supports three color treatments via variant (default, outline, solid) and built-in collapse / maximize / remove tools.

Collapsible card

The body of the card. Use the tools in the header to collapse or maximize it.

tsx

<Card title="Sales" theme="primary" variant="outline" collapsible maximizable>
  The body of the card.
</Card>

Prop	Type	Default	Description
`children`required	`React.ReactNode`	—	Card body content.
`title`	`string`	—	Header title.
`icon`	`string`	—	Bootstrap Icons class shown in the header.
`theme`	`BootstrapTheme`	—	Applies the color treatment.
`variant`	`'default' \| 'outline' \| 'solid'`	`'default'`	Colored header, colored top border, or fully colored card.
`collapsible`	`boolean`	—	Show the collapse tool.
`defaultCollapsed`	`boolean`	—	Start collapsed.
`maximizable`	`boolean`	—	Show the maximize tool.
`removable`	`boolean`	—	Show the remove tool.
`tools`	`React.ReactNode`	—	Extra header tools.
`footer`	`React.ReactNode`	—	Footer content.
`bodyClass / headerClass / footerClass`	`string`	—	Section class overrides.
`className`	`string`	—	Class on the card element.
`outline`	`boolean`	—	Deprecated — use variant="outline".

Alert

A contextual message, optionally with an icon, title, and dismiss button.

Success!Your changes have been saved.

Heads up — double-check your input.

tsx

<Alert theme="success" title="Success!" icon="bi-check-circle" dismissable>
  Your changes have been saved.
</Alert>

Prop	Type	Default	Description
`children`required	`React.ReactNode`	—	Alert body.
`theme`	`BootstrapTheme`	`'info'`	Alert color.
`title`	`string`	—	Bold heading.
`icon`	`string`	—	Bootstrap Icons class.
`dismissable`	`boolean`	—	Render a close button.

Callout

A bordered, highlighted block for tips and notes.

Did you know?

Callouts are great for inline documentation notes.

tsx

<Callout theme="info" title="Did you know?">
  Callouts are great for inline documentation notes.
</Callout>

Prop	Type	Default	Description
`children`required	`React.ReactNode`	—	Callout body.
`theme`	`BootstrapTheme`	`'info'`	Accent color.
`title`	`string`	—	Heading.
`icon`	`string`	—	Bootstrap Icons class.

Progress

A single progress bar with optional stripes, animation, and label.

45%

tsx

<Progress value={45} theme="primary" showLabel />
<Progress value={80} theme="success" striped animated />

Prop	Type	Default	Description
`value`	`number`	`0`	Fill percentage (0–100).
`theme`	`BootstrapTheme`	`'primary'`	Bar color.
`striped`	`boolean`	—	Striped bar.
`animated`	`boolean`	—	Animate the stripes.
`height`	`string`	—	Track height (e.g. "1.5rem").
`showLabel`	`boolean`	—	Show the percentage inside the bar.

ProgressGroup

A labeled progress row with a value over a max.

Add Products to Cart80%

Complete Purchase78%

tsx

<ProgressGroup label="Add Products to Cart" value={160} max={200} color="primary" />

Prop	Type	Default	Description
`label`required	`string`	—	Row label.
`value`required	`number`	—	Current value.
`max`	`number`	`100`	Maximum value.
`color`	`BootstrapTheme`	`'primary'`	Bar color.
`showPercentage`	`boolean`	`true`	Show the computed percentage.

Ratings

A star rating display.

tsx

<Ratings value={4} />
<Ratings value={3} max={5} color="danger" />

Prop	Type	Default	Description
`value`required	`number`	—	Number of filled stars.
`max`	`number`	`5`	Total stars.
`color`	`BootstrapTheme`	`'warning'`	Star color.
`readonly`	`boolean`	`true`	Display-only (no interaction).
`className`	`string`	—	Wrapper class.

A user profile card with avatar, title, description, and social links.

Nina Mcintire

Software Engineer

UI/UX, design systems, and front-end performance.

tsx

<ProfileCard
  name="Nina Mcintire"
  title="Software Engineer"
  description="UI/UX and front-end performance."
  socials={[{ icon: 'bi-github', url: '#', label: 'GitHub' }]}
/>

Prop	Type	Default	Description
`name`required	`string`	—	Display name.
`title`	`string`	—	Role / subtitle.
`image`	`string`	—	Avatar image src.
`imageAlt`	`string`	`'User'`	Avatar alt text.
`description`	`string`	—	Short bio.
`socials`	`Array<{ icon: string; url: string; label?: string }>`	—	Social links.
`children`	`React.ReactNode`	—	Extra footer content.
`className`	`string`	—	Card class.

DescriptionBlock

A label/value block, useful for KPI strips and detail panes.

$35,210.43

Total Revenue

Order #4219

Customer: A. Pierce
Status: Shipped
Total: $120.00

tsx

<DescriptionBlock title="$35,210.43" text="Total Revenue" />
<DescriptionBlock title="Order #4219" items={{ Customer: 'A. Pierce', Status: 'Shipped' }} />

Prop	Type	Default	Description
`title`required	`string`	—	Primary heading / value.
`text`	`string`	—	Caption under the title.
`items`	`Record<string, string>`	—	Key/value pairs rendered as a list.
`className`	`string`	—	Wrapper class.

Timeline

A vertical, time-ordered list of events.

New message

Support replied to your ticket.

12:05

New user registered

09:30

tsx

<Timeline
  items={[
    { time: '12:05', icon: 'bi-envelope', iconTheme: 'primary', title: 'New message', body: 'Support replied.' },
    { time: '09:30', icon: 'bi-person', iconTheme: 'success', title: 'New user registered' },
  ]}
/>

Prop	Type	Default	Description
`items`required	`TimelineItem[]`	—	Events: { time, title, icon?, iconTheme?, body?, footer?, url? }.
`className`	`string`	—	Wrapper class.

Topbar dropdown widgets. Pass them to DashboardLayout's topbarEnd. Each shows a badge with the item count.

tsx

<DashboardLayout
  menuItems={menuItems}
  topbarEnd={
    <>
      <NavMessages
        messages={[{ from: 'Brad', text: 'Call me', time: '4h', star: 'danger' }]}
      />
      <NavNotifications
        notifications={[{ text: '5 new reports', icon: 'bi-file-earmark', time: '2d' }]}
        count={15}
      />
      <NavTasks tasks={[{ text: 'Design review', progress: 40, color: 'danger' }]} />
    </>
  }
>
  {children}
</DashboardLayout>

NavMessages props

Prop	Type	Default	Description
`messages`required	`NavMessage[]`	—	{ from, text, image?, url?, time?, star? }.
`badgeColor`	`BootstrapTheme`	`'danger'`	Badge color.
`count`	`number \| string`	—	Badge count (defaults to messages.length).
`seeAllUrl`	`string`	`'#'`	Footer link target.
`seeAllText`	`string`	`'See All Messages'`	Footer link text.

NavNotifications props

Prop	Type	Default	Description
`notifications`required	`NavNotification[]`	—	{ text, icon?, time?, url? }.
`badgeColor`	`BootstrapTheme`	`'danger'`	Badge color.
`count`	`number \| string`	—	Badge count (defaults to length).
`seeAllText`	`string`	`'See All Notifications'`	Footer link text.

NavTasks props

Prop	Type	Default	Description
`tasks`required	`NavTask[]`	—	{ text, progress, color?, url? }.
`badgeColor`	`BootstrapTheme`	`'warning'`	Badge color.
`seeAllText`	`string`	`'See All Tasks'`	Footer link text.

DirectChat client

A chat card with a message thread and a slide-in contacts pane.

tsx

<DirectChat
  badge={3}
  messages={[
    { from: 'Sarah', image: '/sarah.png', timestamp: '2:15', text: 'Hey there!' },
    { from: 'Me', image: '/me.png', timestamp: '2:16', text: 'Hi!', isOwn: true },
  ]}
  contacts={[{ name: 'Sarah', image: '/sarah.png', date: '1:30', preview: 'See you soon' }]}
/>

Prop	Type	Default	Description
`messages`	`DirectChatMessage[]`	`[]`	{ from, image, timestamp, text, isOwn? }.
`contacts`	`DirectChatContact[]`	`[]`	{ name, image, date, preview }.
`badge`	`number`	`0`	Unread badge in the header.
`collapsible`	`boolean`	`true`	Show the collapse tool.
`removable`	`boolean`	`true`	Show the remove tool.
`onRemove`	`() => void`	—	Called when removed.
`className`	`string`	—	Card class.

ApexChart / SparklineChart client

ApexCharts wrappers. ApexChart takes a full ApexCharts config; SparklineChart is a minimal inline chart from a number array. Both lazy-load apexcharts — see Plugins for the required CSS.

tsx

<ApexChart
  id="sales"
  series={[{ name: 'Sales', data: [30, 40, 35, 50, 49, 60] }]}
  config={{ chart: { type: 'line', height: 300 }, xaxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun'] } }}
/>

<SparklineChart id="spark" data={[5, 9, 7, 12, 10, 15]} />

Prop	Type	Default	Description
`id`required	`string`	—	Unique DOM id for the chart container.
`series`required	`any[]`	—	ApexCharts series (ApexChart only).
`config`required	`Record<string, any>`	—	ApexCharts options (ApexChart only).
`data`required	`number[]`	—	Data points (SparklineChart only).

WorldMap client

A vector world map powered by jsVectorMap (lazy-loaded).

tsx

<WorldMap id="visitors-map" height={260} />

Prop	Type	Default	Description
`id`required	`string`	—	Unique DOM id.
`height`	`number`	`220`	Map height in pixels.

CommandPalette client

tsx

import { CommandPalette, flattenMenuToCommands } from 'adminlte-react'

const items = flattenMenuToCommands(menuItems)
// items: { label, href, icon?, section? }[]

<CommandPalette items={items} placeholder="Jump to…" />

Prop	Type	Default	Description
`items`required	`CommandItem[]`	—	{ label, href, icon?, section? }.
`placeholder`	`string`	`'Search pages…'`	Search input placeholder.

flattenMenuToCommands(nodes) walks a MenuNode[] tree, skips placeholder links (href === '#'), and de-duplicates by href.

Brad Diesel

John Pierce

Nora Silvester

SmallBox

150

53%

InfoBox

Card client

Collapsible card

Alert

Callout

Did you know?

Progress

ProgressGroup

Ratings

ProfileCard

Nina Mcintire

DescriptionBlock

$35,210.43

Order #4219

Timeline

New message

New user registered

NavMessages / NavNotifications / NavTasks client

NavMessages props

NavNotifications props

NavTasks props

DirectChat client

ApexChart / SparklineChart client

WorldMap client

CommandPalette client

Brad Diesel

John Pierce

Nora Silvester

Widgets

SmallBox

150

53%

InfoBox

Card client

Collapsible card

Alert

Callout

Did you know?

Progress

ProgressGroup

Ratings

ProfileCard

Nina Mcintire

DescriptionBlock

$35,210.43

Order #4219

Timeline

New message

New user registered

NavMessages / NavNotifications / NavTasks client

NavMessages props

NavNotifications props

NavTasks props

DirectChat client

ApexChart / SparklineChart client

WorldMap client

CommandPalette client