+
+
+
Component Showcase
+
Divider Component
+
+ A comprehensive showcase of all Divider component variants, weights, colors, and orientations.
+
+
+
+ {/* Weight by Color Matrix - Horizontal */}
+
+
+
+ Horizontal Dividers: Weight by Color Matrix
+
+ {/* Header Row */}
+
+
+
Weight
+
+
+
Gray
+
+
+
Base
+
+
+
Green
+
+
+
+ {/* Thin Row */}
+
+
+ Thin
+
+ 0.5px
+
+
+
+
+
+
+ {/* Regular Row */}
+
+
+ Regular
+
+ 1px
+
+
+
+
+
+
+ {/* Strong Row */}
+
+
+ Strong
+
+ 2px
+
+
+
+
+
+
+
+ {/* Vertical Dividers */}
+
+
+
+ Vertical Dividers: Weight by Color Matrix
+
+ {/* Header Row */}
+
+
+
Weight
+
+
+
Gray
+
+
+
Base
+
+
+
Green
+
+
+
+ {/* Thin Row */}
+
+
+ {/* Regular Row */}
+
+
+ {/* Strong Row */}
+
+
+
+ {/* Weights Comparison */}
+
+
+
+ Stroke Weights
+ Dividers are available in three stroke weights to represent different levels of visual hierarchy.
+
+
+
Thin (0.5px) - Subtle separation
+
+
+
+
Regular (1px) - Default weight
+
+
+
+
Strong (2px) - Emphasized boundaries
+
+
+
+
+ {/* Color Variants */}
+
+
+
+ Color Variants
+ Colors are mapped from the XRPL Design System color palette:
+
+
+ {/* Dark Mode Colors (Default) */}
+
+
Dark Mode (Default)
+
+
+
+
+ Gray: $gray-600
+
+ #454549
+
+
+
+
+
+ Base: $white
+
+ #FFFFFF
+
+
+
+
+
+ Green: $green-300
+
+ #21E46B
+
+
+
+
+
+ {/* Light Mode Colors */}
+
+
Light Mode
+
+
+
+
+ Gray: $gray-300
+
+ #C1C1C2
+
+
+
+
+
+ Base: $gray-900
+
+ #111112
+
+
+
+
+
+ Green: $green-300
+
+ #21E46B
+
+
+
+
+
+
+
Gray - Neutral separation (default)
+
+
+
+
Base - High contrast separation (adapts to theme)
+
+
+
+
Green - Brand accent separation
+
+
+
+
+ {/* Real-World Examples */}
+
+
+
+ Real-World Examples
+
+
+ {/* Content Section Separation */}
+
+
Content Section Separation
+
+
Section Title
+
This is some content in the first section that explains something important.
+
+
This is content in the second section that follows naturally from the first.
+
+
+
+ {/* List Item Separation */}
+
+
List Item Separation
+
+
+
+
Feature One
+
Description of the first feature
+
+
+
+
Feature Two
+
Description of the second feature
+
+
+
+
Feature Three
+
Description of the third feature
+
+
+
+
+
+ {/* Vertical Divider Between Columns */}
+
+
Vertical Divider Between Columns
+
+
+
+
Column One
+
Content for the first column
+
+
+
+
Column Two
+
Content for the second column
+
+
+
+
Column Three
+
Content for the third column
+
+
+
+
+
+ {/* Major Section Break */}
+
+
Major Section Break (Strong + Green)
+
+
Primary Section
+
This section contains the main content of the page.
+
+
Secondary Section
+
This section is clearly separated with a strong branded divider.
+
+
+
+ {/* Navigation Separator */}
+
+
Navigation Item Separator
+
+
+
Home
+
+
Documentation
+
+
API Reference
+
+
Community
+
+
+
+
+
+ {/* API Reference */}
+
+
+
+ Component API
+
+ {/* Header Row */}
+
+
Prop
+
Type
+
Default
+
Description
+
+
+ {/* orientation */}
+
+
orientation
+
'horizontal' | 'vertical'
+
'horizontal'
+
Sets the divider orientation
+
+
+
+ {/* weight */}
+
+
weight
+
'thin' | 'regular' | 'strong'
+
'regular'
+
Controls the stroke thickness
+
+
+
+ {/* color */}
+
+
color
+
'gray' | 'base' | 'green'
+
'gray'
+
Sets the divider color
+
+
+
+ {/* className */}
+
+
className
+
string
+
''
+
Additional CSS classes
+
+
+
+ {/* decorative */}
+
+
decorative
+
boolean
+
true
+
Whether the divider is purely decorative (hides from screen readers)
+
+
+