Spacer

A utility component that fills available space in a flex container.

Examples

Flex Separation

Item 1

Item 2 (Pushed Right)

blade

<div class="rounded-lg border border-background-700/40 p-4 dark:border-background-400/20">
    <div class="flex items-center border border-dashed border-primary/50 p-2">
        <div class="bg-primary/20 p-2 rounded text-xs text-foreground/80 dark:text-background-200">
            Item 1</div>
        <x-plume::spacer />
        <div class="bg-primary/20 p-2 rounded text-xs text-foreground/80 dark:text-background-200">
            Item 2 (Pushed Right)</div>
    </div>
</div>

Usage

blade

<div class="flex">
                <div>Left</div>
                <x-plume::spacer />
                <div>Right</div>
                </div>