Design system

Separator

A hairline division between related sections or inline groups.

Built on Radix SeparatorUpstream API

Service summary

Inspection and scheduled maintenance

Labour
Parts
Tax

Usage

import { Separator } from "@workshop1/ui/components/separator"

Use a separator when spacing alone does not make a boundary clear. Horizontal is the default; vertical separators need a parent with an explicit height. Avoid stacking separators with card shadows or borders that already provide the same boundary.

The component is decorative by default. Set decorative={false} only when the division carries document structure that assistive technology needs to perceive.