Beautiful, accessible components you own.

A circular avatar picker with a built-in crop-and-resize modal. Click the circle to choose a JPG or PNG, position it, and the cropped image syncs to a Livewire property.

A versatile button with multiple variants, sizes, link support, and built-in Livewire loading states.

An accessible checkbox with label, description, custom icon, and clickable-card layouts. Works with wire:model.

A calendar date picker bound to a read-only input, with month navigation, today/selected highlighting and several display formats. The calendar is teleported so it never clips. Works with wire:model.

A text input with an optional label and automatic validation error display for Livewire and request errors.

An accessible form label that pairs with inputs, checkboxes, and other controls.

A numeric field with minus/plus steppers that respect min, max, and step — works with wire:model and keyboard arrows.

A segmented one-time-code input with auto-advance, backspace and arrow-key navigation, and paste-to-fill. Works with wire:model or a plain form field, and can fire an event when complete.

A radio control matching the checkbox API, with label, description, and clickable-row layouts.

An interactive star rating with hover preview and click-to-set (click the current value again to clear). Read-only mode for display. Works with wire:model or a plain form field.

A styled native select with an optional label, placeholder and automatic validation errors. Pass <option> elements as the content. Works with wire:model.

A range slider for picking a value within a range. Themed with the primary accent color across browsers, with an optional label and live value readout. Works with wire:model.

A multi-line text field with an optional label and automatic validation errors. Matches the input component's styling. Works with wire:model.

An animated switch control for boolean settings, with label, description, and three sizes. Works with wire:model. Announced as a switch (role="switch" on the underlying checkbox) to assistive technology.

A set of stacked, collapsible sections. Expand any number of items, or set `exclusive` to keep only one open. Pairs with <x-accordion.item>.

A flexible content container with optional header and footer slots and three sizes.

A pannable, zoomable infinite surface. Scroll or trackpad to glide with momentum, dispatch events to zoom or recenter, and drop any content in the middle. Optional dotted background.

A thin divider for separating content. Horizontal by default, vertical on demand, or with a centered label.

A draggable split layout with resizable panes. Lay panes out horizontally or vertically with a slim, grabbable gutter between them. Nest splitters for complex layouts.

A segmented tab control for switching between panels of content. Compose with <x-tabs.list>, <x-tabs.tab> and <x-tabs.panel>.

A collapsible application sidebar with offcanvas, icon, and floating variants, built from composable header/content/group/footer parts.

A user avatar showing a photo, auto-generated initials from a name, or a fallback icon. Five sizes, square or circle, an optional status dot, and deterministic colors.

A small label for status, counts and categories. Solid, soft status and outline variants in three sizes, with an optional icon and pill shape.

A friendly placeholder for when there's no data yet — an icon, title, description and an optional action. Pass an <x-slot:icon> to customize the glyph.

A keyboard key cap for shortcut hints — pairs with menus, tooltips, and command palettes.

A styled, horizontally scrollable data table. Compose with <x-table.columns> + <x-table.column> for the header and <x-table.row> + <x-table.cell> for the body.

A ⌘K / Ctrl+K command palette with fuzzy search, grouped items, keyboard navigation and a teleported overlay. Selecting an item dispatches a command-select event.

A teleported slide-in panel from the left or right, with header, content and footer slots and optional parent scaling.

A click-to-open menu anchored to its trigger, with configurable position, alignment, and gap.

An accessible, teleported dialog (role="dialog", labelled by its header) with focus trapping, header/content/footer slots, and event-driven open/close.

A teleported floating panel that follows its trigger on scroll and resize. The same engine that powers the dropdown, with full control over placement.

A lightweight, pure-Alpine tooltip that appears on hover or focus, with four positions and an optional arrow.

A contextual message box with six variants, built-in per-variant icons, title, and description.

A horizontal progress bar for showing completion. Set a value (0–100), or use the indeterminate state for unknown-duration work. Three thicknesses.

A pulsing placeholder for content that is still loading. Size it with utility classes, render a circle, or stack several text lines.

An accessible loading indicator in four sizes — the same spinner the button uses, available anywhere.

A global notification stack with progress bars, hover-to-pause, and four types. Trigger from JS, Blade sessions, or Livewire events. The stack is a polite aria-live region and every toast has a keyboard-accessible dismiss button.

The VS Code editor as a Blade component — syntax highlighting, themes, auto dark mode, and many languages. Lazy-loads its bundle on demand.

A rich-text WYSIWYG editor with a configurable toolbar (headings, lists, links, code) built on Tiptap. Works with wire:model. Lazy-loads its bundle on demand.