FiberUISeparator
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 ItemSecond ItemThird Item
Item 1Item 2Item 3
import { Separator } from "@repo/ui/components/separator";
export const Example1 = () => {
return (
<>
{/* Horizontal Separator */}
<div className="mb-10 flex flex-col rounded-md border border-gray-500 p-2 text-lg">
First Item
<Separator />
Second Item
<Separator />
Third Item
</div>
<Separator />
{/* Vertical Separator */}
<div className="mt-10 flex flex-row items-center rounded-md border border-gray-500 px-4 py-2 text-lg">
Item 1
<Separator orientation="vertical" />
Item 2
<Separator orientation="vertical" />
Item 3
</div>
</>
);
};
Component Code
import { cn } from "@repo/ui/lib/utils";
import { SeparatorProps, useSeparator } from "react-aria";
import {} from "react-aria/i18n";
interface SeparatorComponentProps extends SeparatorProps {}
export const Separator: React.FC<SeparatorComponentProps> = (props) => {
const { separatorProps } = useSeparator(props);
return (
<div
{...separatorProps}
className={cn(
"bg-gray-500",
props.orientation === "vertical"
? "mx-2 my-0 h-full w-px"
: "mx-0 my-2 h-px w-full",
)}
/>
);
};