Divider

A horizontal divider line that visually separates content sections, helping to create visual hierarchy and organization.

Use Cases

• Separating form sections
• Dividing content blocks
• Creating visual breaks between components
• Organizing long pages into digestible sections

Properties

thickness

Line thickness. Type: string. Options: thin, medium, thick. Default: thin.

Visual Impact: thin – 1px line – subtle separation (most common); medium – 2px line – moderate emphasis; thick – 4px line – strong emphasis (rarely used).

Recommendations: Use ‘thin’ for most use cases (subtle, professional). Use ‘medium’ for stronger visual breaks. Avoid ‘thick’ – usually too heavy.

colorScheme

Color scheme for divider line. Type: string.

Examples: gray, blue, indigo, slate.

Best Practices

• Use Divider to separate major form sections (after personal info, before payment info)
• Use thickness: ‘thin’ for most use cases (subtle separation)
• Use thickness: ‘medium’ for stronger visual breaks
• Don’t overuse – too many dividers make content feel fragmented
• Prefer Space component for whitespace, Divider for visible separation

Common Mistakes

Using Divider between every component

Why it's a problem: Over-dividing makes page feel fragmented and cluttered – reduces readability

Fix: Use Divider only for major section breaks. Use Space for whitespace without visible lines.

Using thickness: ‘thick’ for routine dividers

Why it's a problem: Thick dividers are visually heavy and dominate the page

Fix: Use ‘thin’ for most dividers, ‘medium’ for stronger emphasis