Divider
A thin rule that separates sections or groups related content.
Project details
Private
Updated today
Updated today
Installation
Terminal
pnpm dlx shadcn@latest add https://react-toolbox.io/r/divider.jsonNew here? Set up your project first. Styles, fonts, and required components are included.
Usage
A divider is a semantic separator by default. Use decorative when spacing or nearby headings already communicate the grouping. Vertical dividers stretch in a flex row; give them an explicit height outside flex layouts. Use className or style for spacing and inset rules.
API reference
Key props and defaults. Full types and inline documentation are included with the source in material/divider.
Divider
| Property | Type | Default |
|---|---|---|
decorative | booleanHide a purely visual rule from assistive technology. | false |
orientation | 'horizontal' | 'vertical'Direction of the rule. Vertical dividers stretch within a flex row. | 'horizontal' |
Material guidelines
- Use a 1px rule to separate content groups when spacing alone does not make their relationship clear.
- Prefer spacing and headings over redundant rules. Mark a purely visual divider as decorative.