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/radix/separator.jsonnpx shadcn@latest add https://kit.dev/r/radix/separator.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/separator.jsonyarn shadcn@latest add https://kit.dev/r/radix/separator.jsonInstall the following dependencies:
bun add radix-uinpm install radix-uipnpm add radix-uiyarn add radix-uiCopy and paste the following code into your project.
"use client";
import { Separator as SeparatorPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";
export const Separator = (
props: React.ComponentProps<typeof SeparatorPrimitive.Root>
) => {
const {
className,
orientation = "horizontal",
decorative = true,
...rest
} = props;
return (
<SeparatorPrimitive.RootUpdate 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
PropType
AttributeType