@lilith/ui-layout

Layout components for page structure and content organization. Theme-agnostic components using semantic tokens for consistent spacing and structure.

Features

• Container - responsive max-width container with padding
• Grid - CSS grid layout with responsive columns
• Stack - vertical/horizontal flexbox stack with gap
• Section - page section wrapper with consistent spacing
• Spacer - flexible space component
• ButtonGroup - grouped button layout
• GlassPanel - re-exported from ui-glassmorphism

Installation

pnpm add @lilith/ui-layout

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "styled-components": "^6.0.0"
}

Usage

Container

Responsive container with max-width and horizontal padding:

import { Container } from '@lilith/ui-layout';

<Container>
  <h1>Page Content</h1>
  <p>Content is centered with responsive max-width</p>
</Container>

// Size variants
<Container size="sm">Small container</Container>
<Container size="md">Medium container</Container>
<Container size="lg">Large container</Container>
<Container size="xl">Extra large container</Container>
<Container size="full">Full width container</Container>

Grid

CSS Grid layout with responsive column configuration:

import { Grid } from '@lilith/ui-layout';

// Fixed columns
<Grid columns={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

// Responsive columns
<Grid columns={{ sm: 1, md: 2, lg: 3, xl: 4 }} gap="lg">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

// Auto-fit with minimum column width
<Grid minColumnWidth="250px" gap="md">
  <div>Flexible item 1</div>
  <div>Flexible item 2</div>
  <div>Flexible item 3</div>
</Grid>

Stack

Flexbox stack for vertical or horizontal layouts:

import { Stack } from '@lilith/ui-layout';

// Vertical stack (default)
<Stack gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

// Horizontal stack
<Stack direction="horizontal" gap="sm" align="center">
  <Avatar />
  <span>Username</span>
  <Badge>Pro</Badge>
</Stack>

// With wrapping
<Stack direction="horizontal" gap="sm" wrap>
  <Tag>React</Tag>
  <Tag>TypeScript</Tag>
  <Tag>Node.js</Tag>
</Stack>

// Justify content
<Stack direction="horizontal" justify="space-between">
  <Button>Cancel</Button>
  <Button>Submit</Button>
</Stack>

Section

Page section with consistent vertical spacing:

import { Section } from '@lilith/ui-layout';

<Section>
  <h2>Features</h2>
  <p>Section content with default spacing</p>
</Section>

// Size variants
<Section size="sm">Compact section</Section>
<Section size="md">Medium section</Section>
<Section size="lg">Large section</Section>
<Section size="xl">Extra large section</Section>

// With background
<Section background="surface">
  Highlighted section
</Section>

Spacer

Flexible space component for layouts:

import { Spacer } from '@lilith/ui-layout';

// Fixed size spacer
<Stack>
  <Header />
  <Spacer size="lg" />
  <Content />
</Stack>

// Flexible spacer (fills available space)
<Stack direction="horizontal">
  <Logo />
  <Spacer flex />
  <Navigation />
</Stack>

ButtonGroup

Group buttons together with consistent spacing:

import { ButtonGroup } from '@lilith/ui-layout';

<ButtonGroup>
  <Button variant="secondary">Cancel</Button>
  <Button variant="primary">Save</Button>
</ButtonGroup>

// Vertical orientation
<ButtonGroup orientation="vertical">
  <Button>Option 1</Button>
  <Button>Option 2</Button>
  <Button>Option 3</Button>
</ButtonGroup>

// Full width buttons
<ButtonGroup fullWidth>
  <Button>Accept</Button>
  <Button>Decline</Button>
</ButtonGroup>

GlassPanel

Re-exported from @lilith/ui-glassmorphism for convenience:

import { GlassPanel } from '@lilith/ui-layout';

<GlassPanel variant="light">
  Glassmorphism panel content
</GlassPanel>

API Reference

ContainerProps

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl' | 'full'	'lg'	Max-width size
padding	boolean	true	Include horizontal padding
children	ReactNode	-	Content

GridProps

Prop	Type	Default	Description
columns	number | ResponsiveColumns	1	Number of columns
gap	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Gap between items
minColumnWidth	string	-	Min width for auto-fit
children	ReactNode	-	Grid items

StackProps

Prop	Type	Default	Description
direction	'vertical' | 'horizontal'	'vertical'	Stack direction
gap	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Gap between items
align	'start' | 'center' | 'end' | 'stretch'	-	Align items
justify	'start' | 'center' | 'end' | 'space-between'	-	Justify content
wrap	boolean	false	Allow wrapping
children	ReactNode	-	Stack items

SectionProps

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Vertical padding size
background	'transparent' | 'surface' | 'background'	'transparent'	Background color
children	ReactNode	-	Section content

SpacerProps

Prop	Type	Default	Description
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Fixed size
flex	boolean	false	Fill available space

ButtonGroupProps

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Button arrangement
fullWidth	boolean	false	Stretch buttons to full width
gap	'xs' | 'sm' | 'md'	'sm'	Gap between buttons
children	ReactNode	-	Button elements

Types

import type {
  ContainerProps,
  GridProps,
  StackProps,
  SectionProps,
  SpacerProps,
  ButtonGroupProps,
  GlassPanelProps,
} from '@lilith/ui-layout';

License

MIT