Display
Separator
Solid and dashed rules, with an optional label.
Separators divide content. Cuelark adds the dashed rule used throughout the system and a labelled variant, the classic "or" between sign-in options.
Preview
or
Docs Components Theming
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/separator.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/separator.
Usage
import { Separator } from "@/components/ui/separator";
<Separator label="or" />API reference
Separator
Extends Radix Separator.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "dashed" | "solid" | Line style. |
| label | ReactNode | — | Text in the middle (horizontal only). |
| orientation | "horizontal" | "vertical" | "horizontal" | Direction. |
Accessibility
- Decorative by default; pass decorative={false} for a semantic separator.
FAQ
Also searched as: react separator · divider component · hr with text · shadcn separator · dashed divider