Layout

Components for organizing and structuring page layouts.

Visual divider between content sections

Item 1

Item 2

Item 3

<Separator />
<Separator orientation="vertical" />

Responsive grid layout for cards

Card 1

Card content goes here.

Card 2

Card content goes here.

Card 3

Card content goes here.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

Tailwind spacing utilities visualized

gap-1

4px

gap-2

8px

gap-4

16px

gap-6

24px

gap-8

32px

gap-12

48px

gap-16

64px

Max-width utilities for content containers

max-w-sm (384px)

max-w-md (448px)

max-w-lg (512px)

max-w-xl (576px)

max-w-2xl (672px)