Components Reference

AdminLTE 4 for Laravel ships 40 Blade components built on Bootstrap 5.3 and vanilla JS. Every component is registered under the adminlte- prefix and used with Laravel's component tag syntax:

<x-adminlte-card title="Hello">Body content</x-adminlte-card>

The alias after the prefix matches the registration map in src/AdminLteServiceProvider.php (e.g. the card alias → <x-adminlte-card>). Constructor parameters become tag attributes; array/mixed parameters accept a bound PHP value (:attr="$value"). Slots are passed as inner content ($slot) or as named slots (<x-slot name="footer">…</x-slot>).

Components are grouped into three categories: Widget, Form, and Tool. Tool and plugin-backed form components automatically enable their underlying JS library through the PluginManager; load the assets in your layout with the @pluginStyles / @pluginScripts directives.

Widget components

Card — <x-adminlte-card>

A Bootstrap card with optional header, tools, theming, and collapse/remove/maximize controls.

Props

Helpers: cardClass() builds the wrapper classes from theme/outline; hasTools() decides whether the toolbar renders (driven by collapsible, removable, maximizable).

Slots: $slot (card body), tools (header toolbar buttons), footer (card footer).

Example

<x-adminlte-card title="Sales" icon="bi bi-graph-up" theme="primary" collapsible>
    <x-slot name="tools">
        <button class="btn btn-sm">Export</button>
    </x-slot>

    Monthly revenue chart goes here.

    <x-slot name="footer">Updated 2 minutes ago</x-slot>
</x-adminlte-card>

InfoBox — <x-adminlte-info-box>

A compact stat box with an icon, value, label, and optional progress bar.

Props

Helpers: iconClass() resolves the icon background from theme/iconTheme.

Slots: $slot (optional extra content).

Example

<x-adminlte-info-box title="Bookmarks" text="41,410" icon="bi bi-bookmark"
    theme="info" progress="70" progressText="70% increase in 30 days" />

SmallBox — <x-adminlte-small-box>

A large colored KPI box with a value, label, icon, and "more info" link.

Props

Slots: none (content is driven by props).

Example

<x-adminlte-small-box title="150" text="New Orders" icon="bi bi-bag"
    theme="success" url="/orders" urlText="View all" />

Alert — <x-adminlte-alert>

A themed, optionally dismissable Bootstrap alert.

Props

Slots: $slot (alert body).

Example

<x-adminlte-alert theme="success" icon="bi bi-check-circle" title="Saved!" dismissable>
    Your changes were stored successfully.
</x-adminlte-alert>

Callout — <x-adminlte-callout>

A bordered callout box for highlighted notes.

Props

Slots: $slot (callout body).

Example

<x-adminlte-callout theme="warning" title="Heads up">
    This action cannot be undone.
</x-adminlte-callout>

Progress — <x-adminlte-progress>

A single Bootstrap progress bar.

Props

Helpers: barClass() composes the bar classes from theme/striped/animated.

Slots: none.

Example

<x-adminlte-progress :value="65" theme="success" striped animated showLabel height="12px" />

ProgressGroup — <x-adminlte-progress-group>

A labeled progress bar with a value/max readout.

Props

Helpers: percentage() computes value / max * 100.

Slots: none.

Example

<x-adminlte-progress-group label="Add Products to Cart" :value="160" :max="200" color="info" />

Timeline — <x-adminlte-timeline>

A vertical timeline rendered from an array of events.

Props

Each item supports: title, body, icon, icon_bg (theme), url, footer.

Slots: none (data-driven).

Example

<x-adminlte-timeline :items="[
    ['icon' => 'bi bi-envelope', 'icon_bg' => 'primary', 'title' => 'New email', 'body' => 'You have 3 unread messages.'],
    ['icon' => 'bi bi-gear', 'icon_bg' => 'success', 'title' => 'Settings updated'],
]" />

DescriptionBlock — <x-adminlte-description-block>

A titled block with optional text and a definition list of key/value items.

Props

Slots: none.

Example

<x-adminlte-description-block title="$1,200" text="Total revenue"
    :items="['Orders' => 35, 'Refunds' => 2]" />

ProfileCard — <x-adminlte-profile-card>

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

Props

Slots: $slot (extra content below the card body).

Example

<x-adminlte-profile-card name="Jane Doe" title="Lead Designer" image="/img/jane.jpg"
    description="10 years in product design."
    :socials="[['icon' => 'bi bi-twitter', 'url' => '#', 'color' => 'info']]" />

Ratings — <x-adminlte-ratings>

A star rating display (read-only by default).

Props

Helpers: stars() returns the per-star filled/empty state array.

Slots: none.

Example

<x-adminlte-ratings :value="4" :max="5" color="warning" />

NavNotifications — <x-adminlte-nav-notifications>

A navbar dropdown listing notifications with a badge count.

Props

Slots: none.

Example

<x-adminlte-nav-notifications badge-color="danger" :notifications="[
    ['icon' => 'bi bi-envelope', 'title' => '4 new messages', 'time' => '3 mins', 'url' => '#'],
]" />

NavMessages — <x-adminlte-nav-messages>

A navbar dropdown listing messages with sender avatars.

Props

Slots: none.

Example

<x-adminlte-nav-messages :messages="[
    ['from' => 'Brad Diesel', 'image' => '/img/b.jpg', 'text' => 'Call me when you can', 'url' => '#'],
]" />

NavTasks — <x-adminlte-nav-tasks>

A navbar dropdown listing tasks with progress bars.

Props

Slots: none.

Example

<x-adminlte-nav-tasks :tasks="[
    ['title' => 'Design template', 'progress' => 80, 'color' => 'primary', 'url' => '#'],
]" />

DirectChat — <x-adminlte-direct-chat>

A chat-style message panel rendered from an array of messages.

Props

Slots: $slot (footer/input area below the messages).

Example

<x-adminlte-direct-chat title="Support" :items="[
    ['message' => 'Hi there!', 'avatar' => '/img/u.jpg', 'is_own' => false],
    ['message' => 'How can I help?', 'avatar' => '/img/me.jpg', 'is_own' => true],
]" />

Toast — <x-adminlte-toast>

A Bootstrap toast notification.

Props

Slots: $slot (toast body).

Example

<x-adminlte-toast title="Notice" theme="success" icon="bi bi-check" :delay="4000">
    Your profile was updated.
</x-adminlte-toast>

Tabs — <x-adminlte-tabs>

A tab container; wrap one or more <x-adminlte-tab> children.

Props

Slots: $slot (the <x-adminlte-tab> children).

Tab — <x-adminlte-tab>

A single tab pane inside a <x-adminlte-tabs> group.

Props

Slots: $slot (tab pane content).

Example

<x-adminlte-tabs variant="pills" justified>
    <x-adminlte-tab title="Overview" icon="bi bi-grid" active>Overview content</x-adminlte-tab>
    <x-adminlte-tab title="Details">Details content</x-adminlte-tab>
</x-adminlte-tabs>

Accordion — <x-adminlte-accordion>

A Bootstrap accordion container; wrap one or more <x-adminlte-accordion-item> children.

Props

Slots: $slot (accordion item children).

AccordionItem — <x-adminlte-accordion-item>

A single collapsible panel inside an accordion.

Props

Slots: $slot (panel body).

Example

<x-adminlte-accordion id="faq" flush>
    <x-adminlte-accordion-item title="What is included?" parent="faq" expanded>
        Everything you need.
    </x-adminlte-accordion-item>
    <x-adminlte-accordion-item title="Refunds?" parent="faq">
        Within 30 days.
    </x-adminlte-accordion-item>
</x-adminlte-accordion>

Breadcrumb — <x-adminlte-breadcrumb>

A breadcrumb trail rendered from an array of items.

Props

Slots: $slot (optional trailing content).

Example

<x-adminlte-breadcrumb :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Settings', 'active' => true],
]" />

Form components

All form inputs follow Laravel conventions: they read old input and validation errors from the named field automatically (helpers dotName(), resolvedValue(), hasError(), errorMessage()), and render Bootstrap validation feedback unless disableFeedback is set. The fgroupClass prop adds classes to the form-group wrapper.

Input — <x-adminlte-input>

A labeled text input with optional input-group addons.

Props

Slots: $slot and named slots for input-group prepend/append addons (see view).

Example

<x-adminlte-input name="email" label="Email address" type="email" placeholder="[email protected]" />

InputSwitch — <x-adminlte-input-switch>

A Bootstrap toggle switch checkbox.

Props

Helpers: isChecked() resolves the checked state from old input.

Slots: none.

Example

<x-adminlte-input-switch name="notifications" label="Email notifications" :checked="true" />

InputColor — <x-adminlte-input-color>

A native color picker input.

Props

Slots: none.

Example

<x-adminlte-input-color name="brand_color" label="Brand color" default="#198754" />

InputFile — <x-adminlte-input-file>

A file upload input supporting single or multiple files.

Props

Helpers: fieldName() appends [] for multiple uploads.

Slots: none.

Example

<x-adminlte-input-file name="attachments" label="Attachments" multiple />

Textarea — <x-adminlte-textarea>

A labeled textarea.

Props

Slots: $slot (textarea contents/value).

Example

<x-adminlte-textarea name="bio" label="About you" rows="4" />

Select — <x-adminlte-select>

A labeled native select; pass <option> elements as the slot.

Props

Slots: $slot (the <option> elements).

Example

<x-adminlte-select name="country" label="Country">
    <option value="us">United States</option>
    <option value="de">Germany</option>
</x-adminlte-select>

Button — <x-adminlte-button>

A themed Bootstrap button with optional icon and label.

Props

Helpers: buttonClass() composes classes from theme/outline/size.

Slots: $slot (button content, used when label is omitted).

Example

<x-adminlte-button type="submit" theme="success" icon="bi bi-save" label="Save changes" />

InputFlatpickr — <x-adminlte-input-flatpickr> (plugin: flatpickr)

A date/time picker input backed by Flatpickr. Enables the flatpickr plugin automatically.

Props

Helpers: flatpickrConfig() serializes the JS config (sets enableTime for time/datetime).

Slots: none.

Example

<x-adminlte-input-flatpickr name="published_at" label="Publish date" type="datetime"
    :options="['minDate' => 'today']" />

InputTomSelect — <x-adminlte-input-tom-select> (plugin: tom_select)

An enhanced select with search/tagging backed by Tom Select. Enables the tom_select plugin automatically.

Props

Helpers: tomSelectConfig() serializes the JS config.

Slots: none.

Example

<x-adminlte-input-tom-select name="tags" label="Tags" multiple
    :options="['php' => 'PHP', 'js' => 'JavaScript', 'css' => 'CSS']" />

Tool components

Modal — <x-adminlte-modal>

A Bootstrap modal dialog.

Props

Helpers: dialogClass() composes the dialog classes from size/scrollable/centered.

Slots: $slot (modal body), footer (modal footer).

Example

<x-adminlte-modal id="confirmModal" title="Confirm" size="lg" centered>
    Are you sure you want to continue?
    <x-slot name="footer">
        <button class="btn btn-primary" data-bs-dismiss="modal">Yes</button>
    </x-slot>
</x-adminlte-modal>

Datatable — <x-adminlte-datatable> (plugin: tabulator)

An interactive data table backed by Tabulator. Enables the tabulator plugin automatically.

Props

Helpers: tabulatorConfig() serializes the JS config from columns/data/apiUrl/options.

Slots: none.

Example

<x-adminlte-datatable
    :columns="[['title' => 'Name', 'field' => 'name'], ['title' => 'Email', 'field' => 'email']]"
    :data="[['name' => 'Jane', 'email' => '[email protected]']]" />

Editor — <x-adminlte-editor> (plugin: quill)

A rich-text WYSIWYG editor backed by Quill. Enables the quill plugin automatically.

Props

Helpers: resolvedValue() reads old input; quillConfig() serializes the JS config.

Slots: none.

Example

<x-adminlte-editor name="body" label="Article body" placeholder="Write here…" />

Chart — <x-adminlte-chart> (plugin: apexcharts)

A chart backed by ApexCharts. Enables the apexcharts plugin automatically.

Props

Helpers: chartConfig() serializes the JS config.

Slots: none.

Example

<x-adminlte-chart type="bar"
    :series="[['name' => 'Sales', 'data' => [30, 40, 35, 50]]]"
    :categories="['Q1', 'Q2', 'Q3', 'Q4']" height="320px" />

VectorMap — <x-adminlte-vector-map> (plugin: jsvectormap)

An interactive vector map backed by jsVectorMap. Enables the jsvectormap plugin automatically.

Props

Helpers: mapConfig() serializes the JS config.

Slots: none.

Example

<x-adminlte-vector-map map="world_merc"
    :markers="[['name' => 'London', 'coords' => [51.5, -0.12]]]" height="450px" />

Calendar — <x-adminlte-calendar> (plugin: fullcalendar)

An event calendar backed by FullCalendar. Enables the fullcalendar plugin automatically.

Props

Helpers: calendarConfig() serializes the JS config.

Slots: none.

Example

<x-adminlte-calendar :events="[
    ['title' => 'Launch', 'start' => '2026-06-01'],
]" height="600px" />

Kanban — <x-adminlte-kanban> (plugin: sortablejs)

A drag-and-drop Kanban board backed by SortableJS. Enables the sortablejs plugin automatically.

Props

Slots: none.

Example

<x-adminlte-kanban :lanes="[
    ['name' => 'To Do', 'cards' => [['title' => 'Write docs', 'color' => 'primary']]],
    ['name' => 'Done', 'cards' => [['title' => 'Setup repo', 'color' => 'success']]],
]" />

Sortable — <x-adminlte-sortable> (plugin: sortablejs)

A drag-and-drop sortable list backed by SortableJS. Enables the sortablejs plugin automatically.

Props

Slots: $slot (the sortable list items).

Example

<x-adminlte-sortable group="tasks">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
</x-adminlte-sortable>

Wizard — <x-adminlte-wizard>

A multi-step form wizard container; wrap <x-adminlte-wizard-step> children.

Props

Slots: $slot (the <x-adminlte-wizard-step> children).

WizardStep — <x-adminlte-wizard-step>

A single step pane inside a wizard.

Props

Slots: $slot (step content).

Example

<x-adminlte-wizard :steps="2">
    <x-adminlte-wizard-step :step="1" title="Account">
        <x-adminlte-input name="email" label="Email" />
    </x-adminlte-wizard-step>
    <x-adminlte-wizard-step :step="2" title="Confirm">
        Review and submit.
    </x-adminlte-wizard-step>
</x-adminlte-wizard>