Separator

Visually or semantically separates content.

Another UI

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 https://anotherui.dev/r/separator.json

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

<Separator />

Use orientation="vertical" for a vertical separator.

Blog

Docs

Source

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

export function SeparatorVertical() {

Vertical separators between menu items with descriptions.

SettingsManage preferences

AccountProfile & security

HelpSupport & docs

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

export function SeparatorMenu() {

Horizontal separators between list items.

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

export function SeparatorList() {

To enable RTL support, see the RTL configuration guide.

Another UI

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

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

"use client"

import * as React from "react"

See the Base UI Separator documentation.

On This Page