React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

Divider

A flexible divider component with multiple styles, layouts, and spacing options

Interactive Playground

Customize the divider properties and see the changes in real-time

Content above divider

Content below divider

All Layouts

Different divider layout styles

Default (no visible line)

Default layout has no visible divider, only spacing

Subtle

Strong

Dotted

Multiple Icons

All Variants

Different divider variants with decorative elements

Line + Icon Combo

Line + Icon Combo (Dotted)

Line + Icon Combo (Strong)

Line + Slot Combo

Custom Text

Spacings

Different spacing options for vertical rhythm

Content

None spacing

Content

Small spacing

Content

Medium spacing (default)

Content

Large spacing

API Reference

Props

layout

'default' | 'hidden' | 'invisible' - Visual style of the divider. 'default' has no visible line, 'hidden' has no visible line and no spacing, 'invisible' has no visible line and spacing (default: 'default')

variant

'default' | 'icon' - Decorative variant with icons (default: 'default')

spacings

'none' | 'small' | 'medium' | 'large' - Vertical spacing around the divider (default: 'medium')

className

string - Additional CSS classes to apply

children

ReactNode - Custom content to display in the center (only used with 'icon' variant)

Usage Notes

  • • The Divider component is theme-aware and adapts to the current theme's configuration
  • • The 'default' layout has no visible line - it only provides spacing
  • • Use 'subtle' layout for gentle visual separation between content sections (most common)
  • • Use 'strong' layout for more prominent section breaks
  • • The 'line-icon-combo' variant adds a decorative icon in the center with lines on both sides
  • • The 'line-slot-combo' variant allows custom content in the center with lines on both sides
  • • The 'multiple-icons' layout displays three icons in a row
  • • Spacing options control vertical rhythm - 'medium' is recommended for most cases
  • • The 'hidden' layout can be used to maintain spacing without showing a visual divider
  • • Compound variants allow combining layout and variant for different effects (e.g., dotted line-icon-combo)