Overview
Divider provides consistent visual separation between content sections. It includes built-in spacing and aligns with semantic tokens.
Key Features
- Three variants: solid, dashed, gradient
- Built-in spacing above and below (not just one-sided margins)
- Semantic spacing tokens (sm, md, lg) for consistent vertical rhythm
- Used internally by PageHeader and SectionHeading
When to Use
Use Divider for:
- Separating major page sections
- Visual break after PageHeader
- Breaking up content within cards
Skip Divider when:
- -Separating list items - use border utilities
- -Table row borders - handled by table styling
- -Minimal visual separation needed - use spacing only
Examples
Solid Variant
Standard border line. Default variant if not specified.
Content above the divider
Content below the divider
Dashed Variant
Dashed border line for lighter separation.
Content above the divider
Content below the divider
Gradient Variant
Branded gradient separator using the app's primary colors.
Content above the divider
Content below the divider
Spacing Options
Different spacing sizes for various contexts.
No spacing (for custom layouts)
Above
Below
Small (8px above and below)
Above
Below
Medium (16px, py-content)
Above
Below
Large (24px, py-section)
Above
Below
Used By
Divider is used internally by these components:
PageHeader
PageHeader - separator prop supports gradient/solid/dashed variants
SectionHeading
SectionHeading - divider prop supports top/bottom/both positions
Props Reference
Divider Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'dashed' | 'gradient' | 'solid' | Visual style: 'solid' (default), 'dashed', or 'gradient' |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | Vertical spacing: 'none', 'sm' (8px), 'md' (16px), 'lg' (24px) |
className | string | - | Additional CSS classes |
Usage
import { Divider } from '@/ui/components';
// Default solid divider with medium spacing
<Divider />
// Branded gradient divider with large spacing
<Divider variant="gradient" spacing="lg" />
// Dashed divider with small spacing
<Divider variant="dashed" spacing="sm" />
// No spacing (for custom layouts)
<Divider spacing="none" />
// Spacing options use semantic tokens:
// - none: No padding
// - sm: 8px (py-2)
// - md: 16px (py-content) - default
// - lg: 24px (py-section)
// Components that use Divider internally:
// - PageHeader: separator prop (gradient/solid/dashed)
// - SectionHeading: divider prop (top/bottom/both) + dividerVariant