Stable version: 4.0

Beautifully crafted components for your next TALL Stack idea.

TallStackUI gives you 80+ Blade components for Laravel, Livewire, Alpine.js, and Tailwind CSS. It's 100% free, open source, and there's no Pro tier hiding behind a paywall.

Start building See what's new

tallstackui.com

Downloads

188571

Components

84

Project

Stack

Auto deploy

The whole catalog, one install

Accordion Alert Autocomplete Avatar Back To Top Badge Banner Boolean Breadcrumbs Button Calendar Card Carousel Chart Checkbox Clipboard Color Command Palette Currency Date Dial Dialog Dropdown Editor Environment Errors Gallery Icon Input Input Select Kbd Key Value Layout

Link List Loading Modal Number Password Pin Progress Qr Code Radio Range Rating Reaction Select Signature Slide Spinner Stats Step Swap Tab Table Tag Textarea Theme Switch Time Timeline Toast Toggle Tooltip Upload Upload Async

01 New in 4.0

Seven new components. Zero new dependencies.

Charts, a rich text editor, galleries, QR codes and more, without pulling in a single extra JavaScript package. Everything below is rendered live by the components themselves.

<x-chart />

Charts, no library attached

Area, line, bar, pie and donut types that mix in a single plot, with dual axes, stacked series, tooltips and a toggling legend.

20 0 20 40 60 80

Jan Feb Mar Apr May Jun Jul Aug

<x-qr-code />

QR codes, ready to share

Turn any link into a QR code, with optional watermark, colors and sizes. Copy it as PNG or download it as SVG.

<x-editor />

A rich text editor in pure Blade

Writes HTML or Markdown and autoformats as you type. Go ahead, it's real.

<x-gallery />

Galleries with a lightbox

Grid, masonry or feature layouts, captions, keyboard navigation. Click any image to open the built-in lightbox.

<x-spinner />

Thirteen ways to wait

Thirteen animated variants across four sizes and 29 colors, with an optional label. None of them bind any state.

⠋ Thinking...

<x-upload.async />

Uploads that skip Livewire

Large files go straight to your own controller in small chunks, so uploads no longer have to fit a request limit. Around 1 GB is the target.

backup-2026.zip

912 MB · chunk 214/380

skeleton

Placeholders, shaped right

Card, Stats, Table, List, Step and Chart accept a skeleton flag. The placeholder takes the same shape and customizations as the real component.

Component	Status

02 Theme

Dark mode, actually dark.

The old dark palette leaned cold and blue. 4.0 ships a pure neutral scale anchored near black, with a visible step between page, surface and border. Secondary is now a true Violet accent next to the Indigo primary, so overriding your brand colors repaints accents, never the chrome.

primary · indigo secondary · violet

This page runs on the 4.0 palette. Flip it.

dark-900 · page background oklch(0.145 0 0)

dark-800 · component surfaces oklch(0.185 0 0)

dark-700 · borders, dividers, tracks oklch(0.253 0 0)

dark-600 · hover and raised states oklch(0.36 0 0)

Input borders sit at dark-600/50 , softer than a solid line.

03 Developer experience

Nothing here is a screenshot.

The form on the right is a single Livewire component built entirely from TallStackUI parts, with validation and feedback wired in. The styled select hits a real endpoint and the pin code actually checks what you type. Go ahead and try to break it.

Errors, hints and labels come from the components.
Async select.styled pointed at any endpoint.
Dialogs and toasts through one trait: Interactions .

Browse the form components

Name *

Your full name

E-mail *

@gmail.com

Use your Gmail

Age *

Your current age

Country *

Select your country

Color *

Select the theme color

Preferable Developer *

You can choose more than one

Secret Code *

Enter the code: 12345

I accept the terms of use

* This form is an example

04 Customization

Yours, all the way down.

Soft customization lets you append, replace or remove any Tailwind class on any block of any component, straight from your AppServiceProvider and without forking a single template. Define scopes for opt-in variants, or extend the ones that already exist, including the scopes the package ships.

Every block is public API, and renames are documented migrations.
Chains stack: two providers layer on top of each other, not over.
Skeletons inherit it all, so placeholders match your look for free.

Learn soft customization

app · AppServiceProvider.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

use TallStackUi\Facades\TallStackUi;
 
class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
       TallStackUi::customize()
            // Determining the component...
           ->badge() 
           // Pointing the block...
           ->block('wrapper.class') 
           // Customizing!
           ->replace('rounded-md', 'rounded-sm') 
           // Sequentially we can...
           ->and() 
           // Customize other components!
           ->avatar()
           ->block('content.text.class')
           ->prepend('text-2xl');
    }
}

05 Everywhere

Built for Livewire. Works with vanilla Blade.

plain blade

No Livewire? No problem.

Give a form component a name instead of a wire:model and it renders a hidden input your controller reads like any other field. Currency, date, pin, tags, selects and even the calendar work this way.

<form method="POST">
    @csrf
 
    <x-currency name="price" />
    <x-date name="published_at" />
</form>

interactions

Dialogs and toasts, one line.

Confirm, notify and react from PHP or JavaScript through the same API. Try it, this one is live too.

$tsui.interaction('toast')
    .success('Shipped!')
    .send();
 
$tsui.interaction('dialog')
    .info('One line.')
    .send();

06 AI-native

Docs your agents can read.

TallStackUI ships an official MCP server that Claude Code, Cursor or any MCP client can query: component discovery, full documentation, free-text search and the entire soft customization map. If you prefer raw files, every component's docs are also served as plain Markdown.

Set up your editor

terminal

# Add the MCP server to Claude Code

$ claude mcp add --transport http tallstackui https://tallstackui.com/mcp/tallstackui

# Or read any component as plain Markdown

$ curl https://tallstackui.com/ai/ chart .md

✓ list_components · 84 components, grouped and summarized

✓ get_component · full docs, per section

✓ search_documentation · free-text, with fuzzy fallback

✓ search_customization · every soft customization block

Blade components

180K+

Downloads

Languages bundled

MIT

Open source, forever

07 Sponsors

Backed by the community.

TallStackUI is free and open source, kept moving by sponsors who care about good open tooling. Want your logo here? Sponsor the project .

Diamond sponsor

TallStackUI

Ship something beautiful.

Drop it in, make it yours, ship it.

Get started

Beautifully crafted components for your next TALL Stack idea.

Downloads

188571

Components

84

Seven new components. Zero new dependencies.

Charts, no library attached

QR codes, ready to share

A rich text editor in pure Blade

Insert link

Insert image

Galleries with a lightbox

Thirteen ways to wait

Uploads that skip Livewire

Placeholders, shaped right

Dark mode, actually dark.

Nothing here is a screenshot.

Yours, all the way down.

Built for Livewire. Works with vanilla Blade.

No Livewire? No problem.

Dialogs and toasts, one line.

Docs your agents can read.

Backed by the community.

Ship something beautiful.