Components
45+ components, all authored with <script setup lang="ts"> and prefixed Lte*. The default plugin registers every core component globally; in Nuxt they are auto-imported. Render any of them as <LteName> with typed props and named slots.
Layout
LteDashboardLayout, LteAuthLayout, LteAppContent, LteSidebar, LteSidebarBrand, LteSidebarNav, LteSidebarNavItem, LteSidebarOverlay, LteTopbar, LteFooter, LteColorModeToggle, LteFullscreenToggle — see Layout.
Widgets
| Component | Key props |
|---|---|
LteCard | title, icon, theme, variant (default/outline/solid), gradient, collapsible, defaultCollapsed, removable, maximizable, bodyClass |
LteSmallBox | title, text, theme, icon, url, urlText, loading |
LteInfoBox | title, text, icon, theme, iconTheme, variant (default/solid), progress, progressText, unit |
LteAlert / LteCallout | theme/variant, title, icon, dismissible (Alert) |
LteProgress / LteProgressGroup | value, theme, striped, animated, label |
LteTimeline | items: TimelineItem[] (time, icon, iconTheme, title, body, footer, url) |
LteRatings / LteProfileCard / LteDescriptionBlock | value/max; name/title/image; header/text/percentage/trend |
LteDirectChat | contacts pane + messages (paired with useDirectChat()) |
LteNavMessages / LteNavNotifications / LteNavTasks | topbar dropdowns fed by NavMessage[] / NavNotification[] / NavTask[] |
LteToast | title, theme, autohide, delay |
LteTabs / LteTab | tab container + per-tab panel via slots |
LteAccordion / LteAccordionItem | flush; per-item title, open |
LteBreadcrumb | items ([{ label, href? }]) |
LteCommandPalette | ⌘K palette indexed from the menu (no props) |
Forms
LteButton, LteInput, LteTextarea, LteSelect, LteInputSwitch, LteInputColor, LteInputFile, LteInputFlatpickr, LteInputTomSelect — labelled Bootstrap 5.3 controls with v-model support.
Tools
LteModal, LteWizard, LteWizardStep — a Bootstrap modal wrapper and a multi-step wizard.
Usage snippets
<!-- A collapsible, outlined card -->
<LteCard title="Sales" icon="bi-graph-up" theme="primary" variant="outline" collapsible>
Monthly revenue summary…
</LteCard>
<!-- Stat boxes -->
<LteSmallBox title="150" text="New orders" theme="primary" icon="bi-bag" url="#" />
<LteInfoBox
text="Bookmarks"
title="41,410"
icon="bi-bookmark"
theme="info"
:progress="70"
progress-text="70% increase in 30 days"
/><!-- A timeline driven by data -->
<script setup lang="ts">
import type { TimelineItem } from '@adminlte/vue'
const events: TimelineItem[] = [
{ time: '3m', icon: 'bi-bell', iconTheme: 'info', title: 'New ping', body: 'A device pinged your endpoint.' },
]
</script>
<template>
<LteTimeline :items="events" />
<!-- A labelled, v-model input -->
<LteInput v-model="email" type="email" label="Email" icon="bi-envelope"
placeholder="you@example.com" required />
<!-- ⌘K command palette — already in the default layout -->
<LteCommandPalette />
</template>Card tools (collapse / maximize / remove) are powered by the useCardWidget() composable that LteCard uses internally — see Theming for the composable conventions, and the live demo for every component in context.