import { Spacer } from "@/components/ui/spacer"
export function SpacerDemo() {
return (
<div className="flex w-full max-w-md flex-col">
<div className="bg-card border-border text-foreground flex h-12 w-full items-center justify-center rounded-md border font-medium shadow-sm">
Box 1
</div>
<Spacer size="md" />
<div className="bg-card border-border text-foreground flex h-12 w-full items-center justify-center rounded-md border font-medium shadow-sm">
Box 2
</div>
<Spacer size="lg" />
<div className="bg-card border-border text-foreground flex h-12 w-full items-center justify-center rounded-md border font-medium shadow-sm">
Box 3
</div>
</div>
)
}
Installation
Usage
import { Spacer } from "@/components/ui/spacer"<div className="flex flex-col">
<div>First element</div>
<Spacer size="md" />
<div>Second element</div>
</div>Examples
Vertical Spacing
import { Spacer } from "@/components/ui/spacer"
export function SpacerDemo() {
return (
<div className="flex w-full max-w-md flex-col">
<div className="bg-card border-border text-foreground flex h-12 w-full items-center justify-center rounded-md border font-medium shadow-sm">
Box 1
</div>
<Spacer size="md" />
<div className="bg-card border-border text-foreground flex h-12 w-full items-center justify-center rounded-md border font-medium shadow-sm">
Box 2
</div>
<Spacer size="lg" />
<div className="bg-card border-border text-foreground flex h-12 w-full items-center justify-center rounded-md border font-medium shadow-sm">
Box 3
</div>
</div>
)
}
Horizontal Spacing
<div className="flex flex-row">
<div>First</div>
<Spacer size="md" axis="horizontal" />
<div>Second</div>
</div>Size Variants
import { Spacer } from "@/components/ui/spacer"
export function SpacerSizes() {
const sizes = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const
return (
<div className="space-y-4">
{sizes.map((size) => (
<div key={size} className="flex items-center gap-4">
<span className="text-muted-foreground w-12 text-sm">{size}</span>
<div className="bg-foreground h-2 w-2 rounded-full" />
<Spacer size={size} axis="horizontal" />
<div className="bg-foreground h-2 w-2 rounded-full" />
</div>
))}
</div>
)
}