New

Separator

PreviousNext

Visually or semantically separates content.

Radix UIBase UI
DWL Components
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {

Installation

pnpm dlx shadcn@latest add separator

Usage

import { Separator } from "@/components/ui/separator"
<Separator />

Examples

Vertical

Use orientation="vertical" for a vertical separator.

Blog
Docs
Source
import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {

Menu

Vertical separators between menu items with descriptions.

SettingsManage preferences
AccountProfile & security
import { Separator } from "@/components/ui/separator"

export function SeparatorMenu() {

List

Horizontal separators between list items.

Item 1
Value 1
Item 2
Value 2
Item 3
Value 3
import { Separator } from "@/components/ui/separator"

export function SeparatorList() {

RTL

To enable RTL support in DWL Components, see the RTL configuration guide.

DWL Components
الأساس لنظام التصميم الخاص بك
مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.
"use client"

import * as React from "react"

API Reference

See the Base UI Separator documentation.