Components
AdminLTE 4 for Laravel ships 40 Blade components, all registered under the adminlte- tag prefix and used with Laravel's component syntax: <x-adminlte-card>…</x-adminlte-card>. Constructor parameters become tag attributes; bind a PHP value with :attr="$value" and pass content via the default $slot or named <x-slot>.
Components fall into three groups: Widget, Form and Tool. Tool and plugin-backed form components auto-enable their JS library through the PluginManager — see Charts & Plugins.
Widget components
| Tag | Key props |
|---|---|
<x-adminlte-card> | title, icon, theme, outline, collapsible, collapsed, removable, maximizable; slots: tools, footer |
<x-adminlte-small-box> | title, text, icon, theme, url, urlText |
<x-adminlte-info-box> | title, text, icon, theme, iconTheme, progress, progressText |
<x-adminlte-alert> | theme, title, icon, dismissable |
<x-adminlte-callout> | theme, title, icon |
<x-adminlte-progress> | value, theme, striped, animated, height, showLabel |
<x-adminlte-progress-group> | label, value, max, color, showPercentage |
<x-adminlte-timeline> | items ([{title, body, icon, icon_bg, url, footer}]) |
<x-adminlte-description-block> | title, text, items (label => value) |
<x-adminlte-profile-card> | name, title, image, description, socials |
<x-adminlte-ratings> | value, max, color, readonly |
<x-adminlte-direct-chat> | title, items ([{message, avatar, is_own}]) |
<x-adminlte-toast> | title, theme, icon, position, autohide, delay |
<x-adminlte-tabs> / <x-adminlte-tab> | tabs: variant, justified, fill; tab: title, active, icon |
<x-adminlte-accordion> / <x-adminlte-accordion-item> | accordion: id, flush, alwaysOpen; item: title, parent, expanded |
<x-adminlte-breadcrumb> | items ([{label, url, active}]) |
<x-adminlte-nav-notifications> | notifications, badgeColor |
<x-adminlte-nav-messages> | messages, badgeColor |
<x-adminlte-nav-tasks> | tasks, badgeColor |
Form components
All form inputs read old() input and validation errors for their name automatically, rendering Bootstrap feedback unless disableFeedback is set. The fgroupClass prop adds classes to the form-group wrapper.
<x-adminlte-input>, <x-adminlte-textarea>, <x-adminlte-select>, <x-adminlte-button>, <x-adminlte-input-switch>, <x-adminlte-input-color>, <x-adminlte-input-file>, plus the plugin-backed <x-adminlte-input-flatpickr> and <x-adminlte-input-tom-select>.
Tool components
<x-adminlte-modal>, <x-adminlte-datatable> (Tabulator), <x-adminlte-editor> (Quill), <x-adminlte-chart> (ApexCharts), <x-adminlte-vector-map> (jsVectorMap), <x-adminlte-calendar> (FullCalendar), <x-adminlte-kanban> / <x-adminlte-sortable> (SortableJS), and <x-adminlte-wizard> / <x-adminlte-wizard-step>.
Usage snippets
{{-- A collapsible card with tools and a footer slot --}}
<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>
{{-- Stat boxes --}}
<x-adminlte-small-box title="150" text="New Orders" icon="bi bi-bag"
theme="success" url="/orders" urlText="View all" />
<x-adminlte-info-box title="Bookmarks" text="41,410" icon="bi bi-bookmark"
theme="info" progress="70" progressText="70% increase in 30 days" />{{-- A labelled input + submit button (auto error display + old() repopulation) --}}
<x-adminlte-input name="email" label="Email address" type="email"
placeholder="you@example.com" />
<x-adminlte-button type="submit" theme="success" icon="bi bi-save" label="Save changes" />
{{-- Tabs --}}
<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>Array props (e.g. timeline.items, breadcrumb.items, chart.series) take a bound PHP value via the colon syntax: :items="[…]" or :series="$series". Plugin-backed components emit their assets automatically when used on a page.