Separator
A horizontal or vertical line between two parts of a page, in the package's separator colour.
A separator draws a line between two parts: two sections of a card, links in a row. It uses the
--separator colour, which is opaque in both themes, so it draws the same line as the rows of a
table and of a dashboard module. It is built on Base UI's separator.
Pension scheme 2026
Defined contribution, since 2019
// apps/docs/examples/ui/separator.tsx'use client';
import {Separator} from '@workspace/active-ui/components/primitives/separator';
/** * A line between two parts: horizontal between a heading block and what * follows, vertical between links in a row. */export default function SeparatorExample() { return ( <div className="w-full max-w-sm"> <div className="flex flex-col gap-1"> <h4 className="text-sm font-semibold">Pension scheme 2026</h4> <p className="text-muted-foreground text-sm"> Defined contribution, since 2019 </p> </div> <Separator className="my-4" /> <div className="flex h-5 items-center gap-4 text-sm"> <a href="#separator-rules">Rules</a> <Separator orientation="vertical" /> <a href="#separator-participants">Participants</a> <Separator orientation="vertical" /> <a href="#separator-documents">Documents</a> </div> </div> );}Usage#
import {Separator} from '@workspace/active-ui/components/primitives/separator';
<Separator className="my-4" />;<Separator orientation="vertical" />;Orientation#
orientation: horizontal (default) is a full-width line one pixel high; vertical is one pixel
wide and stretches to the height of its row, so give the row a height (h- in the example).
What your application provides#
The spacing around the line, with margin classes.
Accessibility#
The line is a role="separator" with its orientation, announced as a boundary between content.
For a line that is only decoration, such as between the items of a list, give it role="none":
inside a list or a listbox, a separator is not allowed.
API#
Import from @workspace/
All props come from the Base UI part this component is built on.
Props
- Type
Orientation- Default
'horizontal'
The orientation of the separator.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
This page adapts the Separator documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.