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/aria/separator.jsonnpx shadcn@latest add https://kit.dev/r/aria/separator.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/separator.jsonyarn shadcn@latest add https://kit.dev/r/aria/separator.jsonInstall the following dependencies:
bun add react-aria-componentsnpm install react-aria-componentspnpm add react-aria-componentsyarn add react-aria-componentsCopy and paste the following code into your project.
"use client";
import type React from "react";
import { Separator as SeparatorPrimitive } from "react-aria-components";
import { cn } from "@/lib/utils";
export const Separator = (
props: React.ComponentProps<typeof SeparatorPrimitive>
) => {
const { className, orientation = "horizontal", ...rest } = props;
return (
<SeparatorPrimitive
className={cn(
"cn-separator block shrink-0 border-0 bg-border aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:self-stretch [:is(hr)]:h-px [:is(hr)]:w-full",
orientation === "horizontal" && "cn-separator-horizontal",
orientation === "vertical" && "cn-separator-vertical",
classNameUpdate 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