Separator

Horizontal or vertical divider between sections.

Default

Horizontal line between blocks of content.

Dark previewReplay previewOpen in new tab

Account

Personal details and password.

Billing

Plan, invoices, payment methods.

Usage

Import the parts you need from the component's folder.

ts
import { Separator } from "@/components/ui/separator";

Vertical

Inline vertical divider with orientation="vertical".

Dark previewReplay previewOpen in new tab
Blog
Docs
Source

In a list

Horizontal rules between stacked rows, with a vertical divider between inline items.

Dark previewReplay previewOpen in new tab

Olivia Martin

olivia@example.com

Member
Manage

Jackson Lee

jackson@example.com

Member
Manage

Isabella Nguyen

isabella@example.com

Member
Manage

API Reference

Separator

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Axis.
decorativebooleantrueMark as decorative (skipped by assistive tech).