Separator
A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
Basic Usage
First Item
Second Item
Third Item
Second Item
Third Item
Item 1Item 2Item 3
import { Separator } from "@repo/ui/components/separator";
export const Example1 = () => {
return (
<div className="space-y-5">
{/* Horizontal Separator */}
<div className="flex flex-col justify-center gap-2 rounded-md p-2 text-lg">
First Item
<Separator />
Second Item
<Separator />
Third Item
</div>
<Separator />
{/* Vertical Separator */}
<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 text-lg">
Item 1
<Separator orientation="vertical" />
Item 2
<Separator orientation="vertical" />
Item 3
</div>
</div>
);
};
Component Code
"use client";
import {
Separator as AriaSeparator,
SeparatorProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const separatorStyles = tv({
base: "bg-border",
variants: {
orientation: {
horizontal: "h-px w-full",
vertical: "h-full min-h-8 w-px",
},
},
defaultVariants: {
orientation: "horizontal",
},
});
export const Separator = (props: SeparatorProps) => {
return (
<AriaSeparator
data-slot="separator"
{...props}
className={separatorStyles({
orientation: props.orientation,
className: props.className,
})}
/>
);
};