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>

API Reference

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

Props

Prop	Type	Default	Description
`size`	`string`	`'lg'`	Maximum content width: sm (3xl), md (5xl), lg (6xl), xl (7xl), prose (optimal reading measure), or full (no cap). The container is centered with responsive horizontal padding. `sm` `md` `lg` `xl` `prose` `full`

Slots

Slot	Description
`default`	The page content. It is centered horizontally and width-capped to the chosen size.