Separator

A stylistic separator component for dividing content sections. Supports horizontal and vertical orientations with customizable thickness and semantic roles.

Basic Usage

First Item

Second Item

Third Item

Item 1

Item 2

Item 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,
            })}
        />
    );
};

Basic Usage

Component Code

On this page