Divider

A horizontal line that visually separates content sections, helping to establish 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.

Tip: Visual impact – thin: 1 px line (subtle), medium: 2 px line (moderate), thick: 4 px line (strong). Recommendations – default: use “thin” for most cases, emphasis: use “medium” for stronger breaks, avoid‑thick: avoid “thick” as it is usually too heavy.

colorScheme

Color scheme for divider line. Type: string.

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; use 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.