Foundation
Separator
A one-pixel rule for page chrome and grouped content.
Workspace
Aback Group
Plan
Pro, billed annually
OverviewMembersBilling
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add separatorWrites components/ui/separator.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Separator } from "@/components/ui/separator";API reference
Props and composition points for Separator. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the rule. |
decorative | boolean | true | Removes the separator from the accessibility tree when it is purely visual. |
className | string | None | Spacing adjustments only. |
Dependencies: radix-ui, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- With decorative set to false, Radix exposes role separator and the orientation.
- Use the separator token for page chrome and the hairline for content dividers.
- Never draw two adjacent one-pixel rules; use divide-y lists instead.
- A separator is not a spacing utility. Use gap or padding for rhythm.
Used in production
The Aback products whose interfaces shaped this component.