Divider

Horizontal and vertical separator line.

API Reference

Prop	Type	Default
orientation	"horizontal" \| "vertical"	"horizontal"
color	"root" \| "primary" \| "secondary"	"root"

Horizontal

default

<Divider />

Vertical

Left

Right

<div className="flex h-10 items-center gap-4">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>

Colors

<Divider color="root" />
<Divider color="primary" />
<Divider color="secondary" />

Basic Usage

import { Divider } from "@/ui";

<Divider />

Source

src/ui/Divider.tsx

import { cn } from "@/utils";

interface DividerProps {
  orientation?: "horizontal" | "vertical";
  color?: "root" | "primary" | "secondary";
  className?: string;
}

const horizontalColors: Record<string, string> = {
  root: "border-divider",
  primary: "border-primary/60",
  secondary: "border-secondary/60",
};

const verticalColors: Record<string, string> = {
  root: "bg-divider",
  primary: "bg-primary/60",
  secondary: "bg-secondary/60",
};

export function Divider({
  orientation = "horizontal",
  color = "root",
  className,
}: DividerProps) {
  if (orientation === "vertical") {
    return (
      <div
        role="separator"
        aria-orientation="vertical"
        className={cn("w-px self-stretch", verticalColors[color], className)}
      />
    );
  }

  return (
    <hr
      className={cn(
        "flex-1 border-0 border-t",
        horizontalColors[color],
        className,
      )}
    />
  );
}