Layouts

Container & Sidebar

Container widths and sidebar layouts for content structure.

Container

Centered container with max-width constraints.

size="xs" (480px)
Extra Small Container
size="sm" (640px)
Small Container
size="prose" (65ch)
Prose Container - ideal for reading
size="content" (960px)
Content Container
size="wide" (1280px)
Wide Container
size="full" (1440px)
Full Container

Container Props

Prop Type Default Description
size 'xs' | 'sm' | 'prose' | 'content' | 'wide' | 'full' 'content' Maximum width
center boolean false Center text content
padding 'none' | 'sm' | 'md' | 'lg' 'md' Horizontal padding
as 'div' | 'main' | 'article' | 'section' 'div' HTML element

Sidebar Layout

Content with a sidebar that stacks on mobile.

Main Content Area

This is the main content area. The sidebar is on the left by default.

On mobile screens, the layout stacks vertically.

Reversed Sidebar

Content with Right Sidebar

Using reverse prop places the sidebar on the right.

Sidebar Props

Prop Type Default Description
sidebarWidth string '280px' Width of the sidebar
reverse boolean false Put sidebar on the right
gap 'sm' | 'md' | 'lg' | 'xl' 'lg' Gap between sidebar and content
sticky boolean false Make sidebar sticky on scroll