Interactive testing environment for react-shared components
Current: Default
A wrapper around the Divider component with configurable spacing options for content sections.
Customize the ContentDivider properties and see the changes in real-time.
Content above divider
Content below divider
Different spacing configurations for content sections.
Content section 1
Content section 2
Content section 1
Content section 2
Content section 1
Content section 2
Different visual styles inherited from the Divider component.
Content above
Content below
Content above
Content below
Content above
Content below
Complete list of props and their descriptions.
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | 'default' | 'hidden' | 'subtle' | 'strong' | 'dotted' | 'multiple-icons' | 'subtle' | Visual style of the divider line (inherited from Divider) |
| spacings | 'small' | 'medium' | 'large' | 'medium' | Vertical spacing around the divider (small: my-5/8, medium: my-10, large: my-10/20) |
| variant | 'default' | 'line-icon-combo' | 'line-slot-combo' | undefined | Divider variant for icon/slot combinations (inherited from Divider) |
| className | string | undefined | Additional CSS classes |
ContentDivider is a convenience wrapper around the Divider component that adds configurable vertical spacing. It's designed for separating content sections with consistent spacing patterns.
The component respects theme configuration for spacings and variant through the useTheme hook. Theme settings can override the default props.
Spacing values are responsive: small (my-5 → md:my-8), medium (my-10 → md:my-10), large (my-10 → md:my-20).