# TallStackUI

> TallStackUI is a suite of 65+ Blade components for the TALL Stack — TailwindCSS, Alpine.js, Laravel and Livewire. It ships production-ready UI (forms, tables, modals, charts, layouts) as plain Blade tags that bind straight to Livewire properties through `wire:model`, and is restyled at runtime through a class customization API instead of published views.

TallStackUI is installed as a Composer package into an existing Laravel application. It publishes no Blade views and brings no build step of its own: components render from inside the package, their JavaScript arrives through a single script tag, and their Tailwind classes are picked up by pointing `app.css` at the package source.

## Requirements

- PHP 8.1 or later
- Laravel 10, 11, 12 or 13
- Livewire 3.5 or later
- Alpine.js 3
- TailwindCSS 4

## What it covers

- **Form** — input, textarea, native and styled select, autocomplete, date, time, calendar, currency, color, number, password, pin, range, tag, toggle, checkbox, radio and upload (Livewire or chunked async), each already wired to labels, hints and Laravel validation errors.
- **Data** — table with server-side sorting, search, pagination, selection and expandable rows; list; stats; key-value editor; and chart and QR code rendered as dependency-free inline SVG.
- **Overlay** — modal, slide, dialog, toast, dropdown, command palette and tooltip, opened from Blade, from Alpine or programmatically from a Livewire component.
- **Navigation and layout** — layout shell, header, sidebar, tab, step, accordion, breadcrumbs, timeline and dial.
- **Feedback** — alert, banner, badge, validation error summary, progress bar and circle, rating, reaction, signature, spinner and full-screen loading overlay.

## Concepts

- **Livewire binding.** Components bind with `wire:model`, nested paths included, so a Livewire Form object or an array key works as the target.
- **Outside Livewire.** Form components also work on a plain Blade page posting to a controller: give them a `name` instead of a `wire:model` and they render a hidden input carrying the value.
- **Soft Customization.** Tailwind classes are overridden at runtime with `TallStackUi::customize()` from a service provider — per block, globally or under a named `scope` — instead of publishing and editing views. From v3 on the method is `customize()`; the v2 `personalize()` no longer exists.
- **Prefix.** The `prefix` config key renames every tag, so `ts-` gives `<x-ts-alert />`.
- **Skeleton.** Card, Stats, Table, List, Step and Chart accept a `skeleton` prop that renders a structural placeholder shaped like the component itself, for the first paint before any data exists.
- **JavaScript API.** A global `$tsui` object opens and closes modals, slides and selects, moves focus, copies to the clipboard and fires dialogs and toasts.

## AI documentation

Every file listed below documents one component for AI assistants: attributes, slots, examples, configuration keys and customization blocks. They are served raw from this site and also ship inside the package, under `vendor/tallstackui/tallstackui/.ai/`. An MCP server exposing the same documentation is hosted at https://tallstackui.com/mcp/tallstackui.

## Reference

- [Component Index](https://tallstackui.com/ai/index.md): Every component grouped by category, plus global configuration, skeleton loading, the Soft Customization overview and the global JavaScript API.

## Display

- [Alert](https://tallstackui.com/ai/alert.md): A dismissible alert component for displaying contextual messages with optional title, icon, and footer. Supports solid, light, and outline color styles.
- [Avatar](https://tallstackui.com/ai/avatar.md): A versatile avatar component supporting images, text initials, Eloquent model integration via ui-avatars.com, presence indicators with pulse animation, and multiple sizes.
- [Avatar Group](https://tallstackui.com/ai/avatar/group.md): A wrapper component that stacks multiple avatar components together with overlapping negative spacing, creating a grouped avatar display commonly used for showing team members or p...
- [Back to Top](https://tallstackui.com/ai/back-to-top.md): A floating button that appears when the user scrolls down, allowing them to smoothly scroll back to the top of the page or to a specific anchor element.
- [Badge](https://tallstackui.com/ai/badge.md): An inline badge component for labels, tags, and status indicators. Supports solid, light, and outline styles with optional icons and multiple sizes.
- [Banner](https://tallstackui.com/ai/banner.md): A top-of-page banner component for announcements or notifications. Supports static text, randomized messages from arrays, animated entrance/exit transitions, scheduled display via...
- [Boolean](https://tallstackui.com/ai/boolean.md): A simple boolean display component that renders a colored icon based on a true/false value. Useful for displaying status columns in tables or read-only boolean fields.
- [Breadcrumbs](https://tallstackui.com/ai/breadcrumbs.md): A breadcrumb navigation component that renders a trail of links with configurable separators, icons, tooltips, and multiple sizes. Items can be passed directly as an array or resol...
- [Calendar](https://tallstackui.com/ai/calendar.md): An **inline** date picker — the same grid-based calendar you get from `<x-date>`, but rendered directly in the page with no input field and no floating popover. Useful for dashboar...
- [Card](https://tallstackui.com/ai/card.md): A versatile card container with optional header, footer, image, color styling, minimize/expand toggle, close button, and Livewire loading indicator. Supports both solid and light c...
- [Carousel](https://tallstackui.com/ai/carousel.md): An image carousel/slider component with manual navigation or autoplay, optional indicators, looping, shuffle, rounded corners, an opt-in lightbox that expands the active image full...
- [Chart](https://tallstackui.com/ai/chart.md): A dependency-free chart rendered as inline SVG. Every path, rectangle and arc is computed server-side and shipped as markup, so there is no charting library and nothing to hydrate....
- [Clipboard](https://tallstackui.com/ai/clipboard.md): A copy-to-clipboard component with two display modes: an input field with a copy button, or a standalone icon-only trigger. Supports label, hint, secret masking, button placement,...
- [Editor](https://tallstackui.com/ai/editor.md): A WYSIWYG rich text editor with no external JavaScript dependency. It is built on `contenteditable`, outputs HTML or Markdown, and exposes a curated toolbar covering inline formatt...
- [Environment](https://tallstackui.com/ai/environment.md): A badge-like component that displays the current Laravel application environment (e.g., "Environment: Local") and optionally shows the current Git branch name. Useful for developme...
- [Errors](https://tallstackui.com/ai/errors.md): A validation error summary component that displays all (or filtered) Laravel validation errors in a styled list with a title, icon, optional close button, and footer slot. Automati...
- [Gallery](https://tallstackui.com/ai/gallery.md): An image gallery component with three layouts — a uniform responsive grid, a masonry column flow, and a feature layout with one large cover above a thumbnail row. Every layout supp...
- [Icon](https://tallstackui.com/ai/icon.md): An icon component that renders SVG icons from Heroicons (built-in) or BladeUI icon packages. Size and color come from bare shorthand attributes, with left/right slots for text or c...
- [Kbd](https://tallstackui.com/ai/kbd.md): A keyboard key indicator component for displaying keyboard shortcuts or key references. Supports multiple sizes, borderless and shadowless modes, and optional tooltips.
- [Key-Value](https://tallstackui.com/ai/key-value.md): Livewire only. A dynamic key-value pair editor that allows users to add, edit, and remove entries. Syncs data with a Livewire property via wire:model. Supports static (read-only) mode, row limits...
- [Link](https://tallstackui.com/ai/link.md): A styled anchor link component with color theming, text formatting options (bold, underline, italic), optional icons, query string building, and fragment anchors. Supports Livewire...
- [List](https://tallstackui.com/ai/list/main.md): A card-shaped, action-oriented list component for browsing or managing a collection of items. Each row displays a name, an optional caption (plain text or arbitrary markup), option...
- [List Items](https://tallstackui.com/ai/list/items.md): A row inside a `<x-list>`. Renders a bold `name`, an optional `caption` (plain text or arbitrary markup through its slot form), optional inline default-slot content, an optional `a...
- [QrCode](https://tallstackui.com/ai/qr-code.md): A dependency-free QR code rendered as inline SVG. The whole of ISO/IEC 18004 lives in `src/Support/QrCode/`: Reed-Solomon over GF(256), the version and error correction tables, dat...
- [Stats](https://tallstackui.com/ai/stats.md): A statistics card component for displaying numeric metrics with titles, icons, and trend indicators. Supports solid, light, and outline styles, animated number counting, colorized...
- [Table](https://tallstackui.com/ai/table.md): A full-featured data table component with server-side sorting, search filtering, pagination, row selection, expandable rows, row highlighting, and clickable row links. Inside Livew...
- [Timeline](https://tallstackui.com/ai/timeline/main.md): A server-side component for displaying sequential events or milestones. Supports two orientations (vertical / horizontal), an optional alternating layout, Tailwind-palette colors w...
- [Timeline Items](https://tallstackui.com/ai/timeline/items.md): A child component of `<x-timeline>` that renders a single event in the timeline. Provides a marker (bullet / icon / custom slot), a content block with optional title, description,...
- [Tooltip](https://tallstackui.com/ai/tooltip.md): A tooltip icon component that displays informational text on hover, focus or tap. Renders an icon (default: question mark circle) that shows a positioned balloon with custom text c...

## Buttons

- [Button](https://tallstackui.com/ai/button/normal.md): A versatile button component supporting solid, light, outline, and flat styles with optional icons, loading states, tooltips, and link behavior.
- [Button Circle](https://tallstackui.com/ai/button/circle.md): A circular button component for icon-only or single-character actions. Supports solid, light, outline, and flat styles with optional loading states.
- [Button Group](https://tallstackui.com/ai/button/group.md): A purely visual container that groups one or more `<x-button>` siblings into a cohesive segment, collapsing adjacent borders, rounding only the outer corners, and isolating focus r...

## Form

- [Autocomplete](https://tallstackui.com/ai/form/autocomplete.md): An input-first single-select component: a regular text `<input>` paired with a floating dropdown of suggestions that filters as the user types. Each item supports a `value`, an opt...
- [Checkbox](https://tallstackui.com/ai/form/checkbox.md): A checkbox input component with configurable sizes, label positioning, and color theming through the TallStackUI color system.
- [Checkbox Group](https://tallstackui.com/ai/form/checkbox/group.md): A group of checkbox options rendered from an array, in one of four presentations: stacked rows, cards, panels or an inline segmented control. The selected state is driven entirely...
- [Color Picker](https://tallstackui.com/ai/form/color.md): A color picker component with two modes: a full Tailwind CSS palette picker with shade range slider, or a custom colors-only picker. Supports selectable-only mode, clearable values...
- [Currency](https://tallstackui.com/ai/form/currency.md): A currency input component that formats numeric values with locale-aware decimal separators, configurable precision, optional currency/symbol display, and a clearable button. Built...
- [Date Picker](https://tallstackui.com/ai/form/date.md): A date picker component with a floating calendar panel, month/year pickers, range selection, multiple date selection, configurable date format, min/max date and year constraints, d...
- [Error](https://tallstackui.com/ai/form/error.md): A form error message component that displays the first validation error for a given property. Renders only when a validation error exists for the specified property name.
- [Hint](https://tallstackui.com/ai/form/hint.md): A form hint component that displays helper text below a form field. Supports both an attribute-based hint string and a default slot for custom HTML content.
- [Input](https://tallstackui.com/ai/form/input.md): A versatile text input component with support for icons, prefix/suffix addons (text, slots, or buttons), clearable values, and automatic zero-stripping for numeric inputs.
- [Input Select](https://tallstackui.com/ai/form/input-select.md): A combined text input with a native select dropdown side-by-side. Supports icons, prefix/suffix addons, clearable values, and can be used as a compound input with a select on the l...
- [Label](https://tallstackui.com/ai/form/label.md): A form label component that renders a `<label>` element with optional required-field asterisk support and error state styling. Appending ` *` to the label text automatically render...
- [Number](https://tallstackui.com/ai/form/number.md): A numeric input component with increment/decrement buttons, configurable min/max bounds, decimal step support, long-press acceleration, and optional centralized or chevron layouts.
- [Password](https://tallstackui.com/ai/form/password.md): A password input component with toggle visibility, strength indicator rules (minimum length, mixed case, numbers, symbols), password generator, and caps lock detection. Rules are d...
- [Pin](https://tallstackui.com/ai/form/pin.md): A PIN/OTP input component that renders individual character boxes with automatic focus navigation, paste support, optional numeric or letter-only restriction, a static prefix, and...
- [Radio](https://tallstackui.com/ai/form/radio.md): A radio button input component with configurable sizes, label positioning, and color theming through the TallStackUI color system.
- [Radio Group](https://tallstackui.com/ai/form/radio/group.md): A group of radio options rendered from an array, in one of four presentations: stacked rows, cards, panels or an inline segmented control. The selected state is driven entirely by...
- [Range](https://tallstackui.com/ai/form/range.md): A range slider input component with configurable sizes, color themes, and support for labels and hints. Renders as a native HTML range input with customized track and thumb styling...
- [Select Native](https://tallstackui.com/ai/form/select/native.md): A native HTML `<select>` component with support for simple arrays, key-value option arrays, grouped options (optgroups), and inline `<option>` elements via the default slot. Can al...
- [Select Styled](https://tallstackui.com/ai/form/select/styled.md): A feature-rich styled select component built with Alpine.js, supporting single and multiple selection, searchable filtering, server-side data via API requests, grouped options, ima...
- [Swap](https://tallstackui.com/ai/swap.md): A compact value cycler shaped like an input: a chevron button on each side and the selected value in the middle. The value changes through the buttons, through a drag over the valu...
- [Tag](https://tallstackui.com/ai/form/tag.md): A tag input component that allows users to add multiple tag values by pressing Enter, with individual tag removal, a bulk erase button, optional prefix character filtering, and con...
- [Textarea](https://tallstackui.com/ai/form/textarea.md): A textarea component with optional manual resize, automatic height resizing, and a character counter that highlights when a maxlength limit is reached.
- [Time Picker](https://tallstackui.com/ai/form/time.md): A time picker component with a floating panel featuring range sliders for hours and minutes, 12-hour (AM/PM) or 24-hour format support, configurable min/max and step values for hou...
- [Toggle](https://tallstackui.com/ai/form/toggle.md): A toggle switch component for boolean inputs with multiple sizes, label positioning, and color customization. Uses a checkbox input under the hood with a stylized toggle appearance...
- [Upload](https://tallstackui.com/ai/form/upload.md): Livewire only. A file upload component with drag-and-drop support, upload progress tracking, image previews, file deletion, and a static mode for displaying previously uploaded files. Integrates...
- [Upload Async](https://tallstackui.com/ai/form/upload/async.md): A chunked, asynchronous file upload component. The browser slices each file and posts the pieces straight to a controller of your own, bypassing Livewire's upload pipeline entirely...

## Overlay & Interaction

- [Command Palette](https://tallstackui.com/ai/command-palette.md): A searchable command palette overlay that fetches results from a server endpoint, supporting keyboard navigation, images, icons, descriptions, grouped results, and disabled options...
- [Dialog](https://tallstackui.com/ai/dialog.md): A modal dialog component for displaying alerts, confirmations, and question prompts with icon, title, description, and action buttons. Dispatched programmatically from Livewire com...
- [Dropdown](https://tallstackui.com/ai/dropdown/main.md): A dropdown menu component that displays a floating panel of actions triggered by a text label, icon, or custom action slot. Supports configurable positioning via the Floating compo...
- [Dropdown Items](https://tallstackui.com/ai/dropdown/items.md): An individual menu item within a Dropdown component, rendering as a button, link, or div depending on the provided attributes. Supports icons, separators, and Livewire navigation.
- [Dropdown Submenu](https://tallstackui.com/ai/dropdown/submenu.md): A nested submenu within a Dropdown component that opens a secondary floating panel on click. Displays a chevron indicator for the submenu direction and supports icons and separator...
- [Loading](https://tallstackui.com/ai/loading.md): Livewire only. A full-screen loading overlay that displays automatically during Livewire requests, with optional spinner, custom text, blur effect, and opacity. Uses `wire:loading` under the hood...
- [Modal](https://tallstackui.com/ai/modal.md): A modal overlay component for displaying content in a centered or top-aligned dialog with optional title, footer, blur backdrop, scrollable body, and configurable sizes. Can be con...
- [Slide](https://tallstackui.com/ai/slide.md): A slide-over panel component that animates in from the edge of the screen (right, left, top, or bottom) with optional title, footer, blur backdrop, and configurable sizes. Useful f...
- [Toast](https://tallstackui.com/ai/toast.md): A notification toast component for displaying brief, auto-dismissing messages with icon, title, description, optional confirm/cancel actions, progress bar, and expandable content....

## Navigation & Layout

- [Accordion](https://tallstackui.com/ai/accordion/main.md): A collapsible panel group for progressively disclosed content such as FAQs, configuration sections, or grouped detail views. By default the accordion opens one item at a time (open...
- [Accordion Items](https://tallstackui.com/ai/accordion/items.md): A child component of `<x-accordion>` that defines a single collapsible panel. Each item has a trigger (clickable header) and a body (rich content). Supports per-item default-open s...
- [Dial](https://tallstackui.com/ai/dial/main.md): A floating action button (FAB) / speed dial component that reveals a set of action items on click or hover. Supports fixed corner positioning, multiple sizes, color styles, and hor...
- [Dial Items](https://tallstackui.com/ai/dial/items.md): An individual action item within a Dial speed dial component. Displays an icon button with an optional tooltip label, and renders as a link or button depending on whether an href i...
- [Layout](https://tallstackui.com/ai/layout/main.md): A full-page application layout component that provides a structured shell with optional top content, sidebar menu, header, main content area, and footer. Integrates with the sideba...
- [Layout Header](https://tallstackui.com/ai/layout/header.md): A sticky top header component for the application layout. Provides left, middle, and right content slots with automatic justification, a mobile hamburger button for toggling the si...
- [Sidebar](https://tallstackui.com/ai/layout/sidebar/main.md): A responsive sidebar navigation component with mobile slide-out drawer and desktop fixed panel. Supports collapsible mode, custom branding, scroll styling, Livewire navigation, and...
- [Sidebar Item](https://tallstackui.com/ai/layout/sidebar/item.md): A sidebar navigation item component that renders as either a single link or a collapsible group containing nested items. Supports active state detection via route matching, icons,...
- [Sidebar Separator](https://tallstackui.com/ai/layout/sidebar/separator.md): A sidebar section separator component that visually divides navigation groups. Available in three styles: simple text label, centered line with text, and right-aligned line with te...
- [Step](https://tallstackui.com/ai/step/main.md): A multi-step wizard component with three visual variations: simple bar indicators, numbered circles with dividers, and bordered panels. The navigation bar (`helpers`) ships in thre...
- [Step Items](https://tallstackui.com/ai/step/items.md): A child component of `<x-step>` that defines a single step's content panel and metadata (title, description, completion state). The content is shown or hidden based on the currentl...
- [Tab](https://tallstackui.com/ai/tab/main.md): A tabbed interface component with underline-styled tab navigation and content panels. On mobile, tabs collapse to a select dropdown by default (unless scroll-on-mobile is enabled)....
- [Tab Items](https://tallstackui.com/ai/tab/items.md): A child component of `<x-tab>` that defines a single tab panel's content and optional left/right slot content displayed alongside the tab label in the navigation.

## Progress & Feedback

- [Progress Bar](https://tallstackui.com/ai/progress/bar.md): A horizontal progress bar component with three display variations: simple inline bar, floating label above the bar, and a title variation with label and percentage side by side. Su...
- [Progress Circle](https://tallstackui.com/ai/progress/circle.md): A circular progress indicator rendered as an SVG donut chart with a centered percentage label. Supports solid and light color styles, four sizes, and customizable stroke widths.
- [Rating](https://tallstackui.com/ai/rating.md): A star rating component for displaying or collecting user ratings. Supports custom icons, interactive evaluation via Livewire methods, and a static read-only mode.
- [Reaction](https://tallstackui.com/ai/reaction.md): Livewire only. An emoji reaction picker using Google Noto Emoji icons. Displays a floating panel of emoji options that users can click to react. Supports animated GIF emojis, filtering to specifi...
- [Signature](https://tallstackui.com/ai/signature.md): Livewire only. A canvas-based signature pad component for capturing handwritten signatures. Supports undo/redo, clearing, exporting as an image file, and customizable pen color, background, and l...
- [Spinner](https://tallstackui.com/ai/spinner.md): A purely visual loading indicator. Thirteen animated variants, four sizes, 29 colors and an optional label. It binds nothing to Livewire and holds no state, so it can be dropped an...

## Theme

- [Theme Switch](https://tallstackui.com/ai/theme-switch.md): A dark mode toggle component with two display variations: a segmented control (with light/dark/system options) and a simple toggle switch. Persists the user's theme preference and...

## Internal

- [Floating](https://tallstackui.com/ai/floating.md): A floating panel utility component powered by Alpine.js `x-anchor` for positioning relative to a reference element. Provides automatic show/hide behavior with click-outside and Esc...
- [Wrapper Input](https://tallstackui.com/ai/wrapper/input.md): A utility wrapper that provides consistent label, hint, and error display around form input components. Handles label rendering (as string or custom slot), hint text below the inpu...
- [Wrapper Radio](https://tallstackui.com/ai/wrapper/radio.md): A utility wrapper that provides consistent label positioning and error display around radio, checkbox, and toggle form components. Supports left or right label placement and start...

## Guides

- [Soft Customization Internal Scopes](https://tallstackui.com/ai/soft-customization-internal-scopes.md): TallStackUI components frequently delegate parts of their rendering to other components. For example, `<x-pin />` renders an internal `<x-label />`, `<x-hint />` and `<x-error />`....

## Optional

- [Documentation](https://tallstackui.com/docs): the documentation website, with a live preview of every component.
- [Repository](https://github.com/tallstackui/tallstackui): source code and issue tracker.
- [Discord](https://discord.gg/sfr66WXh4A): community server.