Components

Container

A centered, max-width content wrapper with responsive padding and selectable widths.

php artisan blatui:add container

Centered content

This card sits inside a size="lg" container, capped at a comfortable reading width and centered with symmetric horizontal padding.

<x-ui.container>
    <x-ui.card>
        <h3 class="text-lg font-semibold">Centered content</h3>
        <p class="text-muted-foreground mt-1 text-sm">
            This card sits inside a <code>size="lg"</code> container, capped at a comfortable
            reading width and centered with symmetric horizontal padding.
        </p>
    </x-ui.card>
</x-ui.container>

Prose

With size="prose" the container clamps to an optimal measure (around 65 characters) so long-form text stays readable. This is ideal for articles, documentation, and blog posts where line length matters more than filling the full width of the screen.

<x-ui.container size="prose">
    <p class="text-foreground text-sm leading-relaxed">
        With <code>size="prose"</code> the container clamps to an optimal measure
        (around 65 characters) so long-form text stays readable. This is ideal for
        articles, documentation, and blog posts where line length matters more than
        filling the full width of the screen.
    </p>
</x-ui.container>

Sizes

size="md"

max-w-5xl

size="xl"

max-w-7xl

<div class="flex flex-col gap-6">
    <div>
        <p class="text-muted-foreground mb-2 text-xs font-medium">size="md"</p>
        <x-ui.container size="md">
            <div class="bg-muted text-muted-foreground rounded-lg border p-4 text-center text-sm">
                max-w-5xl
            </div>
        </x-ui.container>
    </div>

    <div>
        <p class="text-muted-foreground mb-2 text-xs font-medium">size="xl"</p>
        <x-ui.container size="xl">
            <div class="bg-muted text-muted-foreground rounded-lg border p-4 text-center text-sm">
                max-w-7xl
            </div>
        </x-ui.container>
    </div>
</div>