Separator

Visually or semantically separates content. Built on Base UI's separator primitive.

Last updated August 7, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

Improved RTL support — the default separator icon and menu layout mirror correctly with logical properties

Overview

PersianLabs/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 SeparatorDemoExample() {
  return (
    <div className="flex max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1.5">
        <div className="leading-none font-medium">PersianLabs/ui</div>
        <div className="text-muted-foreground">
          The Foundation for your Design System
        </div>
      </div>
      <Separator />
      <div>
        A set of beautifully designed components that you can customize, extend,
        and build on.
      </div>
    </div>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/separator.json

Usage

import { Separator } from "@/components/ui/separator"
 
export function Example() {
  return <Separator />
}

Vertical

Use orientation="vertical" for a vertical separator.

Blog

Docs

Source

import { Separator } from "@/components/ui/separator"
 
export function SeparatorVerticalExample() {
  return (
    <div className="flex h-5 items-center gap-4 text-sm">
      <div>Blog</div>
      <Separator orientation="vertical" />
      <div>Docs</div>
      <Separator orientation="vertical" />
      <div>Source</div>
    </div>
  )
}

Vertical separators between menu items with descriptions.

SettingsManage preferences

AccountProfile & security

HelpSupport & docs

import { Separator } from "@/components/ui/separator"
 
export function SeparatorMenuExample() {
  return (
    <div className="flex items-center gap-2 text-sm md:gap-4">
      <div className="flex flex-col gap-1">
        <span className="font-medium">Settings</span>
        <span className="text-xs text-muted-foreground">
          Manage preferences
        </span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col gap-1">
        <span className="font-medium">Account</span>
        <span className="text-xs text-muted-foreground">
          Profile &amp; security
        </span>
      </div>
      <Separator orientation="vertical" className="hidden md:block" />
      <div className="hidden flex-col gap-1 md:flex">
        <span className="font-medium">Help</span>
        <span className="text-xs text-muted-foreground">
          Support &amp; docs
        </span>
      </div>
    </div>
  )
}

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 SeparatorListExample() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2 text-sm">
      <dl className="flex items-center justify-between">
        <dt>Item 1</dt>
        <dd className="text-muted-foreground">Value 1</dd>
      </dl>
      <Separator />
      <dl className="flex items-center justify-between">
        <dt>Item 2</dt>
        <dd className="text-muted-foreground">Value 2</dd>
      </dl>
      <Separator />
      <dl className="flex items-center justify-between">
        <dt>Item 3</dt>
        <dd className="text-muted-foreground">Value 3</dd>
      </dl>
    </div>
  )
}

RTL

پرشین‌لبز

پایه‌ای برای سیستم طراحی شما

مجموعه‌ای از کامپوننت‌های طراحی‌شده که می‌توانید سفارشی‌سازی، توسعه و روی آن‌ها بسازید.

import { Separator } from "@/components/ui/separator"
 
export function SeparatorRtlExample() {
  return (
    <div className="flex max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1.5">
        <div className="leading-none font-medium">پرشین‌لبز</div>
        <div className="text-muted-foreground">
          پایه‌ای برای سیستم طراحی شما
        </div>
      </div>
      <Separator />
      <div>
        مجموعه‌ای از کامپوننت‌های طراحی‌شده که می‌توانید سفارشی‌سازی، توسعه و
        روی آن‌ها بسازید.
      </div>
    </div>
  )
}

Receipt breakdown

A Persian-market pattern: horizontal separators dividing a price breakdown, with right-to-left digits and Toman currency.

قیمت کالا۲٬۴۵۰٬۰۰۰ تومان

هزینه ارسال۳۵٬۰۰۰ تومان

تخفیف−۱۵۰٬۰۰۰ تومان

مبلغ قابل پرداخت۲٬۳۳۵٬۰۰۰ تومان

import { Separator } from "@/components/ui/separator"
 
const lineItems = [
  { label: "قیمت کالا", value: "۲٬۴۵۰٬۰۰۰ تومان" },
  { label: "هزینه ارسال", value: "۳۵٬۰۰۰ تومان" },
  { label: "تخفیف", value: "−۱۵۰٬۰۰۰ تومان" },
]
 
export function SeparatorReceiptExample() {
  return (
    <div className="w-full max-w-sm rounded-lg border border-border p-4 text-sm">
      <div className="flex flex-col gap-2">
        {lineItems.map((item) => (
          <div key={item.label} className="flex items-center justify-between">
            <span className="text-muted-foreground">{item.label}</span>
            <span>{item.value}</span>
          </div>
        ))}
      </div>
      <Separator className="my-3" />
      <div className="flex items-center justify-between font-medium">
        <span>مبلغ قابل پرداخت</span>
        <span>۲٬۳۳۵٬۰۰۰ تومان</span>
      </div>
    </div>
  )
}

API Reference

Separator

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	The direction of the separator.

Edit this page on GitHub

PreviousSelect NextTabs