Separator

Visually or semantically separates content.

shadcn/ui

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on.

Installation

bunx --bun shadcn@latest add @sui/separator

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

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

<Separator />

Vertical

Use orientation="vertical" for a vertical separator.

Blog

Docs

Source

Vertical separators between menu items with descriptions.

SettingsManage preferences

AccountProfile & security

HelpSupport & docs

List

Horizontal separators between list items.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

shadcn/ui

الأساس لنظام التصميم الخاص بك

مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.

API Reference

See the Base UI Separator documentation.