Get Started
Input
Feedback
Display
Installation
i18n
shadcn/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://ui.tyap.me/r/styles/base/separator.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/separator.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/separator.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/separator.json
Install the following dependencies:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copy and paste the following code into your project.
"use client"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "@/lib/utils"
function Separator({
className,
orientation = "horizontal",
...props
}: SeparatorPrimitive.Props) {
return (
<SeparatorPrimitive
data-slot="separator"
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
className
)}
{...props}
/>
)
}
export { Separator }
Update the import paths to match your project setup.
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
HelpSupport & docs
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 shadcn/ui, see the RTL configuration guide.
shadcn/ui
الأساس لنظام التصميم الخاص بك
مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.
"use client"
import * as React from "react"API Reference#
See the Base UI Separator documentation.