Divider
A React source recipe on a native hr element using the public TIS Divider classes and tokens.
Design
Functional preview
Running with the React source recipe distributed through shadcn and based on Base UI.
Open the React · shadcn/Base UI playground
Toolbar · React · shadcn/Base UI
A vertical separator rendered by the React recipe between Buttons from the same output.
Anatomy
1 2 3
.ds-divider) — use <hr> for semantic separation; mark it as decorative when it is only visual.2 Orientation — horizontal by default; vertical with
.ds-divider--vertical.3 Border token — uses semantic divider/border color, not hardcoded color.
Horizontal divider
The default divider spans the full width of its container and adds vertical separation between content.
Content above the divider
Content below the divider
In a list
Dividers between list items create visual grouping.
Notifications
Manage your notification preferences
Privacy
Control who can see your profile
Security
Two-factor authentication and password
Vertical divider
Use ds-divider--vertical inside a flex container to separate items horizontally.
Center
Right
In a toolbar
Vertical dividers separate groups of actions in a toolbar.
Token mapping
| Property | Token | CSS variable |
|---|---|---|
| line color | component.divider.line.color.default | --ds-divider-line-color-default |
| line thickness | component.divider.line.thickness.default | --ds-divider-line-thickness-default |
| line radius | component.divider.line.radius.default | --ds-divider-line-radius-default |
Usage
When to use
- Proximity and spacing do not sufficiently distinguish related groups.
- A toolbar needs to visually separate action groups.
When not to use
- A heading or spacing already clearly communicates the section change.
- The line would be used only as decoration without a grouping function.
React composition
import { Separator } from "@/components/ui/separator"
<Separator />Implementation
- Status
- Beta
- Distribution
- Source via shadcn
Installation
Configure the namespace once in the React integration guide.
npx shadcn@latest add @tis/separatorpnpm dlx shadcn@latest add @tis/separatoryarn dlx shadcn@latest add @tis/separatorbunx --bun shadcn@latest add @tis/separatorPublic contract
- Registry item
@tis/separator- Provider
- Native React
- Distribution
- Source copied into the application
- Status
- Beta
Accessibility
Accessibility
| Context | Requirement | Implementation |
|---|---|---|
Semantic <hr> | Implicit role="separator" | No extra attributes needed -- the browser provides the role |
Decorative <div> divider | Hidden from assistive technology | aria-hidden="true" |
| Interactive context | Communicates separation to screen readers | role="separator" |
<hr class="ds-divider"> instead of a styled <div>. The <hr> element has implicit role="separator", so no extra ARIA is needed.
Output responsibility
Preserve Base UI semantics and test real content, focus visibility, and accessible names in the consuming application.
Validation evidence
Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.