Divider creates a horizontal or vertical line to visually separate content sections. It supports different colors, orientations, and can include text labels.
import { Divider } from 'reshaped';
Basic Usage
<View gap={4}>
<View padding={4} backgroundColor="neutral-faded">Section 1</View>
<Divider />
<View padding={4} backgroundColor="neutral-faded">Section 2</View>
</View>
Vertical Divider
<View direction="row" gap={4}>
<View padding={4} backgroundColor="neutral-faded">Left</View>
<Divider vertical />
<View padding={4} backgroundColor="neutral-faded">Right</View>
</View>
With Label
<View gap={4}>
<View padding={4} backgroundColor="neutral-faded">Section 1</View>
<Divider>OR</Divider>
<View padding={4} backgroundColor="neutral-faded">Section 2</View>
</View>
Label Positioning
<View gap={4}>
<Divider contentPosition="start">Start</Divider>
<Divider contentPosition="center">Center</Divider>
<Divider contentPosition="end">End</Divider>
</View>
Color Variants
<View gap={4}>
<Divider color="neutral-faded" />
<Divider color="neutral" />
</View>
Responsive Orientation
<View direction={{ s: "column", m: "row" }} gap={4}>
<View padding={4} backgroundColor="neutral-faded">Section 1</View>
<Divider vertical={{ s: false, m: true }} />
<View padding={4} backgroundColor="neutral-faded">Section 2</View>
</View>
Blank Divider
<View gap={4}>
<View padding={4} backgroundColor="neutral-faded">Section 1</View>
<Divider blank />
<View padding={4} backgroundColor="neutral-faded">Section 2</View>
</View>
Node for inserting text labels or custom components as a part of divider
Change component to render vertically
Change component to take no space, useful for using it as a border in components like Tabs
color
'neutral-faded' | 'neutral'
default:"neutral-faded"
Color of the divider
contentPosition
'start' | 'center' | 'end'
Position for rendering children (label)
Offset the divider from the container bounds (CSS value)
Additional classname for the root element
attributes
React.HTMLAttributes<HTMLHRElement>
Additional attributes for the root element
The Divider component automatically adjusts its orientation based on the vertical prop and sets appropriate ARIA attributes.
When using blank, the divider takes no visual space but maintains its semantic role as a separator.
Labels inside dividers are automatically styled with caption text and neutral-faded color for consistency.