The UI system for Laravel teams that own their code

Button

Displays a button or link with variants, sizes, a pill shape, static or Livewire-targeted loading state, leading/trailing icon slots, an accessibility-safe icon-only mode and an optional animated arrow.

Input

Text input with sm/md/lg sizes, invalid, disabled, readonly, file, dark, RTL, and responsive states; composes with label/field/button for forms. Inside a <x-ui.field name> (or with its own name) it self-wires old() repopulation and aria-invalid/aria-describedby from the shared $errors bag.

Native Select

A native select control with a custom chevron and an optional leading icon. Inside a <x-ui.field name> (or with its own name) it self-wires name/id and aria-invalid/aria-describedby from the shared $errors bag.

Card

A content container with header, content and footer sections; renders as div, a, article, section, li, details, dl or figure, with a frameless ghost variant.

Dialog

Modal dialog with focus trap, Escape-to-close, focus restoration, background inertness and a teleported overlay. Supports sm/md/lg/xl/full size presets, a scrollable body, sticky header/footer, layered Escape for nested content, and an opt-in subject-change announcement.

Table

A responsive data table with header, body, row, cell, sort-button, and shared announced loading and empty-state row parts; rows can link as a whole.

Tabs

Accessible tabbed interface (wire:model/x-model bind the active value through x-modelable) with roving tabindex, arrow-key navigation, touch swipe between panels, orientation, line/pills/boxed variants and full-width and disabled-tab support, with opt-in URL sync (`param`) so a tab is shareable as a link.

Badge

Compact status label with semantic variants, sizes, and a read-model `tone` (positive/attention/negative/info/neutral) that resolves to the soft recipe in one place.

Calendar

A localized month grid with full keyboard navigation and an ISO hidden form value.

Command

A filterable, keyboard-navigable command palette for server-authorized commands with stable action keys, disabled reasons, grouped links, shortcuts, and empty-state handling.

Dropdown Menu

Accessible menu with roving focus, type-ahead, click-outside dismissal and Escape handling. Sub-parts cover labels, groups, shortcuts, checkbox/radio items and nested submenus. Opt into `anchored` to teleport the panel past a clipping/scrolling ancestor.

Chart

A token-themed chart wrapper around ApexCharts (area, line, bar, scatter, pie, radar, radial, treemap, boxplot, range & mixed) with themed grid, legend and tooltip.

Form Wizard

A server-ready onboarding wizard with per-step browser validation, restored values, resumable step input, submit progress, server feedback, and unsaved-change protection.

Hero

Marketing hero sections: centred, split, search, form, video, stats, screenshot and more; the centred hero takes a switchable backdrop.

Closing / CTA

Closing call-to-action sections — a centred band with a switchable backdrop, a screenshot-strip media CTA and a split card.

Team

Team sections — a card grid, a split-lead layout, list rows, a photo grid, a minimal grid and a carousel.

Pricing

Pricing sections — from a simple three-tier table (with an optional billing-period toggle) to gradient and elevated cards, tinted and horizontal layouts, and a tabbed switcher.

Paywall

Conversion paywalls — inline plan upgrade, gated article content and a focused subscription card with billing toggle.