Widget components

Widgets are the building blocks of an AdminLTE dashboard body — cards, stat boxes, timelines and chat panels. They are auto-registered by the Nuxt module (and by app.use(AdminLte) in plain Vue), so you can use them without imports. Every widget styles itself from the prebuilt AdminLTE CSS; you only pass props and slots. Colors use the shared BootstrapTheme union: primary, secondary, success, info, warning, danger, light, dark.

This page covers the main widgets. Other widgets also ship in the library (see the components overview) — the API tables below reflect the real component source.

LteCard

The general-purpose container. Renders a .card with an optional header (driven by title/icon or the #header slot), an optional footer slot, and built-in collapse / maximize / remove tools. The theme + variant combination controls the color treatment; gradient adds bg-gradient.

<template>
  <LteCard title="Monthly recap" icon="bi-graph-up" theme="primary" variant="outline" collapsible>
    <p>Card body content.</p>
    <template #footer>Updated just now</template>
  </LteCard>
</template>

Use the #header slot to fully replace the default header (title + tools):

<LteCard>
  <template #header>
    <h3 class="card-title">Custom header</h3>
  </template>
  Body
</LteCard>

Props

Slots

LteSmallBox

A colored stat box with a big number, label, icon and an optional footer link. The whole box is tinted with text-bg-{theme}.

<LteSmallBox
  :title="150"
  text="New orders"
  icon="bi-bag"
  theme="success"
  url="/orders"
  url-text="View orders"
/>

Props

Slots

LteInfoBox

A horizontal stat box: a colored icon chip plus a text label, number and optional progress bar.

<LteInfoBox
  text="Bookmarks"
  :title="41410"
  icon="bi-bookmark"
  theme="info"
  :progress="70"
  progress-text="70% increase in 30 days"
/>

Props

The default slot renders inside .info-box-content (after the number) for custom content.

LteTimeline

Renders a vertical timeline from an array of items. Each item's body and footer are inserted as HTML (v-html).

<script setup lang="ts">
import type { TimelineItem } from 'adminlte-vue'

const items: TimelineItem[] = [
  { time: '12:05', icon: 'bi-envelope', iconTheme: 'primary', title: 'New message', body: 'You have a new message.' },
  { time: '5 mins ago', icon: 'bi-person', iconTheme: 'success', title: 'New user registered' },
]
</script>

<template>
  <LteTimeline :items="items" />
</template>

Props

TimelineItem

LteDirectChat

A chat card with a messages pane and a sliding contacts panel toggled by the header button.

<script setup lang="ts">
import type { DirectChatMessage, DirectChatContact } from 'adminlte-vue'

const messages: DirectChatMessage[] = [
  { from: 'Alex', image: '/avatar.png', timestamp: '23 Jan 2:00 pm', text: 'Hey!' },
  { from: 'You', image: '/me.png', timestamp: '23 Jan 2:05 pm', text: 'Hi there', isOwn: true },
]
const contacts: DirectChatContact[] = [
  { name: 'Count Dracula', image: '/d.png', date: '1/28/2022', preview: 'How have you been?' },
]
</script>

<template>
  <LteDirectChat title="Direct chat" theme="primary" :messages="messages" :contacts="contacts" />
</template>

Props

Slots

DirectChatMessage

DirectChatContact

LteCallout

A bordered, themed note block. Pass body content via the default slot.

<LteCallout theme="warning" title="Follow the steps">
  Make sure you complete the setup before continuing.
</LteCallout>

Props

LteAlert

A Bootstrap alert with an optional icon, title and dismiss button. Supports both controlled (v-model:show) and uncontrolled usage.

<template>
  <LteAlert theme="success" icon="bi-check-circle" title="Saved!" dismissible>
    Your changes were stored.
  </LteAlert>

  <!-- Controlled -->
  <LteAlert v-model:show="visible" theme="danger" dismissible @dismissed="onDismiss">
    Something went wrong.
  </LteAlert>
</template>

Props

Emits

LteProgress

A progress bar with theming, sizing, striped/animated options and an optional percentage label.

<LteProgress :value="60" theme="success" striped animated show-label />

Props