Separator
A quiet boundary between content groups.
Installation
pnpm --filter your-app add "@commenda/pathfinder@workspace:*"Import @commenda/pathfinder/styles.css once after host CSS. Pathfinder ships compiled, prefixed Tailwind v4 CSS; the application needs no Tailwind scanning. Import from @commenda/pathfinder/separator. Interactive callbacks belong in a client component in Next.js App Router.
API reference
| Prop | Type | Behavior |
|---|---|---|
variantConditional | "line"|"label"|"dot" | line; label requires visible label text |
orientation | "vertical"|"horizontal" | horizontal; line only |
decorative | boolean | true; line only |
labelConditional | string | Required for label; disallowed for other variants |
id | string | Stable HTML identifier for the component. |
className | string | Additional classes for the component root. |
Root IDs, className, appropriate ARIA attributes, and typed refs are supported.
Usage rules
Use spacing first. A separator has no surrounding margin: its parent owns the layout. Use decorative={false} for boundaries that assistive technology should identify. Vertical separators are 16 tall by default; a parent can stretch them through layout classes. Labeled lines keep their text available while hiding the rules. Dot is always decorative.
Examples
Variants
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Separator
Source: 342:9, docs 343:542, dot 405:47.
SEPARATOR-01— Source: 0.5 soft-pearl-300 hairline, horizontal fill or vertical 16. Parent owns spacing. A label sits between two lines with 12 gaps; inline dot uses parent gap 6. Prefer whitespace before adding a rule.SEPARATOR-02— Source/Pathfinder: decorative by default. Meaningful line boundaries expose separator orientation; the label's word remains readable while its lines are decorative. Dot is always decorative and never focusable.
Source discrepancies and implementation decisions
Vertical lines use a 1px inline width to stay visible on standard-density displays; their default height is 16px. The parent owns surrounding spacing.