shadcn.io is not affiliated with official shadcn/ui
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 https://kit.dev/r/base/separator.jsonnpx shadcn@latest add https://kit.dev/r/base/separator.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/separator.jsonyarn shadcn@latest add https://kit.dev/r/base/separator.jsonInstall the following dependencies:
bun add @base-ui/reactnpm install @base-ui/reactpnpm add @base-ui/reactyarn add @base-ui/reactCopy and paste the following code into your project.
"use client";
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import { cn } from "@/lib/utils";
export const Separator = (props: SeparatorPrimitive.Props) => {
const { className, orientation = "horizontal", ...rest } = props;
return (
<SeparatorPrimitive
className={cn(
"cn-separator shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
orientation === "horizontal" && "cn-separator-horizontal",
orientation === "vertical" && "cn-separator-vertical",
className
)}
data-slot="separator"
orientation={orientation}Update the import paths to match your project setup.
Usage
import { Separator } from "@/components/ui/separator";<div className="flex max-w-sm flex-col gap-4 text-sm">
<div className="flex flex-col gap-1.5">
<div className="font-medium leading-none">shadcn/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>Demos
Vertical
Vertical separators between inline items.
Menu
Vertical separators between menu items with descriptions.
List
Horizontal separators between list items.
Rtl
Right-to-left separator. See the RTL configuration guide for document direction.
API Reference
Separator
div
PropType
AttributeType