blatui

Components

Card

Displays a card with header, content, and footer.

php artisan blatui:add card
Create project
Deploy your new project in one-click.
<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Create project</x-ui.card-title>
        <x-ui.card-description>Deploy your new project in one-click.</x-ui.card-description>
    </x-ui.card-header>
    <x-ui.card-content>
        <form>
            <div class="flex flex-col gap-6">
                <div class="grid gap-2">
                    <x-ui.label for="name">Name</x-ui.label>
                    <x-ui.input id="name" placeholder="Name of your project" />
                </div>
                <div class="grid gap-2">
                    <x-ui.label for="framework">Framework</x-ui.label>
                    <x-ui.input id="framework" placeholder="Next.js" />
                </div>
            </div>
        </form>
    </x-ui.card-content>
    <x-ui.card-footer class="flex-col gap-2">
        <x-ui.button class="w-full">Deploy</x-ui.button>
        <x-ui.button variant="outline" class="w-full">Cancel</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Blog

Design Jun 2, 2026
Design systems with Tailwind CSS
How we scaled a shared component library across a dozen product teams.
SC Sofia Carter
<x-ui.card variant="sectioned" class="w-full max-w-sm overflow-hidden pt-0">
    <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80&auto=format&fit=crop"
        alt=""
        class="aspect-video w-full object-cover" />
    <x-ui.card-header>
        <div class="text-muted-foreground flex items-center gap-2 text-xs">
            <x-ui.badge variant="secondary">Design</x-ui.badge>
            <span aria-hidden="true">·</span>
            <span>Jun 2, 2026</span>
        </div>
        <x-ui.card-title>Design systems with Tailwind CSS</x-ui.card-title>
        <x-ui.card-description>How we scaled a shared component library across a dozen product teams.</x-ui.card-description>
    </x-ui.card-header>
    <x-ui.card-footer class="gap-2.5">
        <x-ui.avatar class="size-7"><x-ui.avatar-fallback>SC</x-ui.avatar-fallback></x-ui.avatar>
        <span class="text-sm font-medium">Sofia Carter</span>
    </x-ui.card-footer>
</x-ui.card>

Cta

Have a project in mind?

Let's build something great together — tell us about your idea and we'll take it from there.

{{-- Centered call-to-action card. --}}
<x-ui.card class="w-full max-w-sm text-center">
    <div class="flex flex-col items-center gap-2">
        <div class="bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full">
            <x-lucide-rocket class="size-6" aria-hidden="true" />
        </div>
        <h3 class="mt-1 text-lg font-semibold tracking-tight">Have a project in mind?</h3>
        <p class="text-muted-foreground text-sm">Let's build something great together — tell us about your idea and we'll take it from there.</p>
        <x-ui.button class="mt-3">Get in touch</x-ui.button>
    </div>
</x-ui.card>

Hover Glow

Hover for the glow-up

Move your cursor over this card to see it lift with a soft accent glow.

{{-- A card that lifts and glows on hover. --}}
<x-ui.card class="group relative w-full max-w-sm cursor-pointer overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
    <div class="bg-primary/30 pointer-events-none absolute -top-16 left-1/2 size-40 -translate-x-1/2 rounded-full opacity-0 blur-3xl transition-opacity duration-500 group-hover:opacity-100"></div>
    <div class="relative">
        <div class="bg-primary/10 text-primary mb-3 flex size-10 items-center justify-center rounded-lg">
            <x-lucide-sparkles class="size-5" aria-hidden="true" />
        </div>
        <h3 class="font-semibold tracking-tight">Hover for the glow-up</h3>
        <p class="text-muted-foreground mt-1 text-sm">Move your cursor over this card to see it lift with a soft accent glow.</p>
    </div>
</x-ui.card>

Image Overlay

Snowy mountain peaks rising above the clouds at sunset
Travel

Exploring the mountains

A short trip above the clouds, where the air is thin and the views endless.

{{-- Full-bleed image with the title and text overlaid on a gradient scrim. --}}
<x-ui.card class="relative w-full max-w-sm overflow-hidden p-0">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&auto=format&fit=crop"
        alt="Snowy mountain peaks rising above the clouds at sunset"
        class="aspect-[4/3] w-full object-cover" />
    <div class="absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-transparent"></div>
    <div class="absolute inset-x-0 bottom-0 space-y-1.5 p-5 text-white">
        <x-ui.badge class="border-white/30 bg-white/15 text-white backdrop-blur-sm">Travel</x-ui.badge>
        <h3 class="text-lg font-semibold tracking-tight">Exploring the mountains</h3>
        <p class="text-sm text-white/80">A short trip above the clouds, where the air is thin and the views endless.</p>
    </div>
</x-ui.card>

Login

Login to your account
Enter your email below to login to your account.
Forgot your password? 
<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Login to your account</x-ui.card-title>
        <x-ui.card-description>Enter your email below to login to your account.</x-ui.card-description>
        <x-ui.card-action>
            <x-ui.button variant="link">Sign Up</x-ui.button>
        </x-ui.card-action>
    </x-ui.card-header>
    <x-ui.card-content>
        <form class="flex flex-col gap-6">
            <x-ui.field>
                <x-ui.field-label for="card-login-email">Email</x-ui.field-label>
                <x-ui.input id="card-login-email" type="email" placeholder="[email protected]" />
            </x-ui.field>
            <x-ui.field>
                <div class="flex items-center">
                    <x-ui.field-label for="card-login-password">Password</x-ui.field-label>
                    <a href="#" class="ml-auto text-sm underline-offset-4 hover:underline">Forgot your password?</a>
                </div>
                <x-ui.input id="card-login-password" type="password" />
            </x-ui.field>
        </form>
    </x-ui.card-content>
    <x-ui.card-footer class="flex-col gap-2">
        <x-ui.button type="submit" class="w-full">Login</x-ui.button>
        <x-ui.button variant="outline" class="w-full">Login with Google</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Notifications

Notifications
You have 3 unread messages.

Send notifications to this device.

  • Your call has been confirmed.

    5 minutes ago

  • You have a new message.

    1 hour ago

<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Notifications</x-ui.card-title>
        <x-ui.card-description>You have 3 unread messages.</x-ui.card-description>
        <x-ui.card-action>
            <x-ui.button variant="ghost" size="icon" aria-label="Notification settings">
                <x-lucide-bell aria-hidden="true" />
            </x-ui.button>
        </x-ui.card-action>
    </x-ui.card-header>
    <x-ui.card-content class="flex flex-col gap-4">
        <x-ui.field orientation="horizontal" class="rounded-lg border p-3">
            <x-ui.field-content>
                <x-ui.field-label for="card-push">Push notifications</x-ui.field-label>
                <x-ui.field-description>Send notifications to this device.</x-ui.field-description>
            </x-ui.field-content>
            <x-ui.switch id="card-push" checked />
        </x-ui.field>

        <ul class="flex flex-col gap-4">
            <li class="flex items-start gap-3">
                <span class="bg-primary mt-1.5 size-2 shrink-0 rounded-full" aria-hidden="true"></span>
                <div class="text-sm">
                    <p class="font-medium leading-none">Your call has been confirmed.</p>
                    <p class="text-muted-foreground">5 minutes ago</p>
                </div>
            </li>
            <li class="flex items-start gap-3">
                <span class="bg-primary mt-1.5 size-2 shrink-0 rounded-full" aria-hidden="true"></span>
                <div class="text-sm">
                    <p class="font-medium leading-none">You have a new message.</p>
                    <p class="text-muted-foreground">1 hour ago</p>
                </div>
            </li>
        </ul>
    </x-ui.card-content>
    <x-ui.card-footer>
        <x-ui.button class="w-full">
            <x-lucide-check aria-hidden="true" />
            Mark all as read
        </x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Payment

Payment details
Enter your card information to continue.
<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Payment details</x-ui.card-title>
        <x-ui.card-description>Enter your card information to continue.</x-ui.card-description>
    </x-ui.card-header>
    <x-ui.card-content>
        <form class="flex flex-col gap-5">
            <x-ui.field>
                <x-ui.field-label for="pay-name">Name on card</x-ui.field-label>
                <x-ui.input id="pay-name" placeholder="Sofia Carter" autocomplete="cc-name" />
            </x-ui.field>
            <x-ui.field>
                <x-ui.field-label for="pay-number">Card number</x-ui.field-label>
                <x-ui.input id="pay-number" inputmode="numeric" placeholder="1234 1234 1234 1234" autocomplete="cc-number" />
            </x-ui.field>
            <div class="grid grid-cols-2 gap-4">
                <x-ui.field>
                    <x-ui.field-label for="pay-exp">Expires</x-ui.field-label>
                    <x-ui.input id="pay-exp" placeholder="MM/YY" autocomplete="cc-exp" />
                </x-ui.field>
                <x-ui.field>
                    <x-ui.field-label for="pay-cvc">CVC</x-ui.field-label>
                    <x-ui.input id="pay-cvc" inputmode="numeric" placeholder="CVC" autocomplete="cc-csc" />
                </x-ui.field>
            </div>
        </form>
    </x-ui.card-content>
    <x-ui.card-footer>
        <x-ui.button class="w-full">Continue</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Pricing

Premium
For growing teams that need more power.
Popular
$29 /month
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • 50 GB storage
<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Premium</x-ui.card-title>
        <x-ui.card-description>For growing teams that need more power.</x-ui.card-description>
        <x-ui.card-action><x-ui.badge>Popular</x-ui.badge></x-ui.card-action>
    </x-ui.card-header>
    <x-ui.card-content class="flex flex-col gap-5">
        <div class="flex items-baseline gap-1">
            <span class="text-4xl font-bold tracking-tight">$29</span>
            <span class="text-muted-foreground">/month</span>
        </div>
        <ul class="flex flex-col gap-2.5 text-sm">
            @foreach (['Unlimited projects', 'Advanced analytics', 'Priority support', '50 GB storage'] as $feat)
                <li class="flex items-center gap-2"><x-lucide-circle-check class="text-primary size-4 shrink-0" aria-hidden="true" /> {{ $feat }}</li>
            @endforeach
        </ul>
    </x-ui.card-content>
    <x-ui.card-footer>
        <x-ui.button class="w-full">Get started</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Product

Solid oak dining table with wooden chairs
Classic Wooden Table
In stock
Solid oak dining table that seats six.
4.6 (128 reviews)
$249 
<x-ui.card variant="sectioned" class="w-full max-w-sm overflow-hidden pt-0">
    <img src="https://images.unsplash.com/photo-1577140917170-285929fb55b7?w=800&q=80&auto=format&fit=crop"
        alt="Solid oak dining table with wooden chairs"
        class="aspect-[4/3] w-full object-cover" />
    <x-ui.card-header>
        <div class="flex items-start justify-between gap-2">
            <x-ui.card-title>Classic Wooden Table</x-ui.card-title>
            <x-ui.badge variant="secondary">In stock</x-ui.badge>
        </div>
        <x-ui.card-description>Solid oak dining table that seats six.</x-ui.card-description>
    </x-ui.card-header>
    <x-ui.card-content>
        <div class="flex items-center gap-1.5 text-sm">
            <span class="flex text-amber-500" aria-hidden="true">
                <x-lucide-star class="size-4 fill-current" />
                <x-lucide-star class="size-4 fill-current" />
                <x-lucide-star class="size-4 fill-current" />
                <x-lucide-star class="size-4 fill-current" />
                <x-lucide-star-half class="size-4 fill-current" />
            </span>
            <span class="text-muted-foreground">4.6 (128 reviews)</span>
        </div>
    </x-ui.card-content>
    <x-ui.card-footer class="justify-between">
        <span class="text-2xl font-semibold tabular-nums">$249</span>
        <x-ui.button><x-lucide-shopping-cart aria-hidden="true" /> Add to cart</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Profile

SC
Sofia Carter
Product Designer
128
Following
2.3k
Followers
<x-ui.card variant="sectioned" class="w-full max-w-xs">
    <x-ui.card-content class="flex flex-col items-center gap-3 pt-6 text-center">
        <x-ui.avatar class="size-16"><x-ui.avatar-fallback class="text-lg">SC</x-ui.avatar-fallback></x-ui.avatar>
        <div>
            <div class="font-semibold">Sofia Carter</div>
            <div class="text-muted-foreground text-sm">Product Designer</div>
        </div>
        <div class="flex justify-center gap-8 text-sm">
            <div>
                <div class="font-semibold tabular-nums">128</div>
                <div class="text-muted-foreground text-xs">Following</div>
            </div>
            <div>
                <div class="font-semibold tabular-nums">2.3k</div>
                <div class="text-muted-foreground text-xs">Followers</div>
            </div>
        </div>
    </x-ui.card-content>
    <x-ui.card-footer>
        <x-ui.button class="w-full"><x-lucide-user-plus aria-hidden="true" /> Follow</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

Share

Share this document
Anyone with the link can view this document.

People with access

SC
Sofia Carter
[email protected]
Owner
JD
Jackson Doe
[email protected]
Can edit 
<x-ui.card variant="sectioned" class="w-full max-w-md">
    <x-ui.card-header>
        <x-ui.card-title>Share this document</x-ui.card-title>
        <x-ui.card-description>Anyone with the link can view this document.</x-ui.card-description>
    </x-ui.card-header>
    <x-ui.card-content class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
            <x-ui.input value="https://blatui.dev/d/8Fk2pQ" readonly aria-label="Document link" class="flex-1" />
            <x-ui.button variant="secondary"><x-lucide-copy aria-hidden="true" /> Copy</x-ui.button>
        </div>
        <x-ui.separator />
        <div class="flex flex-col gap-3">
            <p class="text-sm font-medium">People with access</p>
            <div class="flex items-center gap-3">
                <x-ui.avatar><x-ui.avatar-fallback>SC</x-ui.avatar-fallback></x-ui.avatar>
                <div class="min-w-0 flex-1 text-sm">
                    <div class="truncate font-medium">Sofia Carter</div>
                    <div class="truncate text-muted-foreground">[email protected]</div>
                </div>
                <span class="text-muted-foreground shrink-0 text-sm">Owner</span>
            </div>
            <div class="flex items-center gap-3">
                <x-ui.avatar><x-ui.avatar-fallback>JD</x-ui.avatar-fallback></x-ui.avatar>
                <div class="min-w-0 flex-1 text-sm">
                    <div class="truncate font-medium">Jackson Doe</div>
                    <div class="truncate text-muted-foreground">[email protected]</div>
                </div>
                <span class="text-muted-foreground shrink-0 text-sm">Can edit</span>
            </div>
        </div>
    </x-ui.card-content>
</x-ui.card>

Simple

Simple box. The base card is just p-6 with a rounded border — no flex, no imposed gaps. Compose freely inside it. 

{{-- The default card is now a simple padded box — drop content straight in, no fighting
     imposed flex/gap/py. Use variant="sectioned" when you want header/content/footer. --}}
<x-ui.card class="w-full max-w-sm">
    <p class="text-sm">
        <span class="font-medium">Simple box.</span>
        The base card is just <code class="text-xs">p-6</code> with a rounded border — no flex,
        no imposed gaps. Compose freely inside it.
    </p>
</x-ui.card>

Stats

Total Revenue
$15,231.89
+20.1%
Trending up this month
New Customers
1,234
-3.2%
Down 3.2% this period
<div class="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
    <x-ui.card variant="sectioned">
        <x-ui.card-header>
            <x-ui.card-description>Total Revenue</x-ui.card-description>
            <x-ui.card-title class="text-2xl tabular-nums">$15,231.89</x-ui.card-title>
            <x-ui.card-action>
                <x-ui.badge variant="secondary">
                    <x-lucide-trending-up class="size-3" aria-hidden="true" />
                    +20.1%
                </x-ui.badge>
            </x-ui.card-action>
        </x-ui.card-header>
        <x-ui.card-footer class="text-muted-foreground text-sm">
            Trending up this month
        </x-ui.card-footer>
    </x-ui.card>
    <x-ui.card variant="sectioned">
        <x-ui.card-header>
            <x-ui.card-description>New Customers</x-ui.card-description>
            <x-ui.card-title class="text-2xl tabular-nums">1,234</x-ui.card-title>
            <x-ui.card-action>
                <x-ui.badge variant="secondary">
                    <x-lucide-trending-down class="size-3" aria-hidden="true" />
                    -3.2%
                </x-ui.badge>
            </x-ui.card-action>
        </x-ui.card-header>
        <x-ui.card-footer class="text-muted-foreground text-sm">
            Down 3.2% this period
        </x-ui.card-footer>
    </x-ui.card>
</div>

Testimonial

"BlatUI let us ship a polished, accessible UI in days instead of weeks. It's become the foundation of every new project."

AB
Amelia Bell
CTO, Acme Inc
<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-content class="flex flex-col gap-4 pt-6">
        <span class="flex text-amber-500" aria-hidden="true">
            <x-lucide-star class="size-4 fill-current" />
            <x-lucide-star class="size-4 fill-current" />
            <x-lucide-star class="size-4 fill-current" />
            <x-lucide-star class="size-4 fill-current" />
            <x-lucide-star class="size-4 fill-current" />
        </span>
        <p class="text-sm leading-relaxed">"BlatUI let us ship a polished, accessible UI in days instead of weeks. It's become the foundation of every new project."</p>
        <div class="flex items-center gap-3">
            <x-ui.avatar class="size-9"><x-ui.avatar-fallback>AB</x-ui.avatar-fallback></x-ui.avatar>
            <div class="text-sm">
                <div class="font-medium">Amelia Bell</div>
                <div class="text-muted-foreground text-xs">CTO, Acme Inc</div>
            </div>
        </div>
    </x-ui.card-content>
</x-ui.card>

With Action

Team members
Invite your team to collaborate.
SC
Sofia Carter
[email protected]
Owner
JD
Jackson Doe
[email protected]
Member 
<x-ui.card variant="sectioned" class="w-full max-w-sm">
    <x-ui.card-header>
        <x-ui.card-title>Team members</x-ui.card-title>
        <x-ui.card-description>Invite your team to collaborate.</x-ui.card-description>
        <x-ui.card-action>
            <x-ui.dropdown-menu>
                <x-ui.dropdown-menu-trigger>
                    <x-ui.button variant="ghost" size="icon" aria-label="Card options">
                        <x-lucide-more-horizontal aria-hidden="true" />
                    </x-ui.button>
                </x-ui.dropdown-menu-trigger>
                <x-ui.dropdown-menu-content align="end">
                    <x-ui.dropdown-menu-item>Edit</x-ui.dropdown-menu-item>
                    <x-ui.dropdown-menu-item>Duplicate</x-ui.dropdown-menu-item>
                    <x-ui.dropdown-menu-separator />
                    <x-ui.dropdown-menu-item variant="destructive">Delete</x-ui.dropdown-menu-item>
                </x-ui.dropdown-menu-content>
            </x-ui.dropdown-menu>
        </x-ui.card-action>
    </x-ui.card-header>
    <x-ui.card-content class="flex flex-col gap-4">
        <div class="flex items-center gap-3">
            <x-ui.avatar>
                <x-ui.avatar-fallback>SC</x-ui.avatar-fallback>
            </x-ui.avatar>
            <div class="min-w-0 flex-1 text-sm">
                <div class="truncate font-medium">Sofia Carter</div>
                <div class="truncate text-muted-foreground">[email protected]</div>
            </div>
            <x-ui.badge variant="outline">Owner</x-ui.badge>
        </div>
        <div class="flex items-center gap-3">
            <x-ui.avatar>
                <x-ui.avatar-fallback>JD</x-ui.avatar-fallback>
            </x-ui.avatar>
            <div class="min-w-0 flex-1 text-sm">
                <div class="truncate font-medium">Jackson Doe</div>
                <div class="truncate text-muted-foreground">[email protected]</div>
            </div>
            <x-ui.badge variant="outline">Member</x-ui.badge>
        </div>
    </x-ui.card-content>
</x-ui.card>

With Image

Snowy mountain peaks rising above the clouds at sunset
Exploring the mountains
A short trip above the clouds.
Travel
Cards group related content and actions, with an optional cover image that bleeds to the edges.
<x-ui.card variant="sectioned" class="w-full max-w-sm overflow-hidden pt-0">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80&auto=format&fit=crop"
        alt="Snowy mountain peaks rising above the clouds at sunset"
        class="aspect-video w-full object-cover" />
    <x-ui.card-header>
        <x-ui.card-title>Exploring the mountains</x-ui.card-title>
        <x-ui.card-description>A short trip above the clouds.</x-ui.card-description>
        <x-ui.card-action>
            <x-ui.badge variant="secondary">Travel</x-ui.badge>
        </x-ui.card-action>
    </x-ui.card-header>
    <x-ui.card-content class="text-muted-foreground text-sm">
        Cards group related content and actions, with an optional cover image that bleeds to the edges.
    </x-ui.card-content>
    <x-ui.card-footer class="gap-2">
        <x-ui.button>Read more</x-ui.button>
        <x-ui.button variant="outline">Share</x-ui.button>
    </x-ui.card-footer>
</x-ui.card>

API Reference

Props, slots and exposed methods for <x-ui.card>.

Props

Prop Type Default Description
variant string 'default' default is a simple padded box for free-form content. sectioned removes horizontal padding and stacks card-header / card-content / card-footer parts (each supplies its own padding).
default sectioned

Slots

Slot Description
default Card content. With the default variant put anything here directly; with the sectioned variant compose the card-* sub-parts below.
x-ui.card-header Top section holding the title, description, and optional action. Use with the sectioned variant.
x-ui.card-title The card heading text, placed inside card-header.
x-ui.card-description Muted supporting text under the title, placed inside card-header.
x-ui.card-action Top-right action area within card-header (e.g. a menu button or link).
x-ui.card-content The main body of a sectioned card.
x-ui.card-footer Bottom section for actions such as buttons.