Separator

Thin divider line — horizontal, vertical, or with a centered label.

import { Separator }from "@/components/ui"

Specification

Draws a thin divider line — horizontal, vertical, or horizontal with a centered label.

Props (3)

Every prop this component accepts, its type, default, and how to use it.

Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Chooses a horizontal rule or a vertical divider.
label	`string`	—	Optional centered label rendered between two horizontal rules (horizontal only).
className	`string`	—	Extra classes merged onto the separator.

Variants

Above

Below

LeftRight

Full source

The complete component, read from src/components/ui/separator.tsx.

separator.tsx

import { cn } from "@/lib/utils";

interface SeparatorProps {
  orientation?: "horizontal" | "vertical";

  label?: string;
  className?: string;
}

export function Separator({ orientation = "horizontal", label, className }: SeparatorProps) {
  if (orientation === "vertical") {
    return <span role="separator" aria-orientation="vertical" className={cn("inline-block h-4 w-px bg-border", className)} />;
  }

  if (label) {
    return (
      <div className={cn("flex items-center gap-3", className)}>
        <span className="h-px flex-1 bg-border" />
        <span className="text-xs font-medium uppercase tracking-wider text-text-tertiary">{label}</span>
        <span className="h-px flex-1 bg-border" />
      </div>
    );
  }

  return <hr className={cn("border-0 border-t border-border", className)} />;
}

Dependencies

To use Separator you also need the following. Copy these into your project alongside it.

Recommended folder structure

project structure

src/components/ui/
  └─ separator.tsx
src/lib/
  └─ utils.ts

Dependency files

These supporting files aren’t components — copy each one into the matching path above.

src/lib/utils.ts

utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

/**
 * Merge class names with clsx semantics + Tailwind conflict resolution.
 * Prefer this in all components.
 */
export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

/**
 * Concatenate class names, filtering out falsy values.
 * @deprecated Prefer {@link cn} — it also resolves Tailwind class conflicts.
 */
export function cx(...args: (string | false | null | undefined)[]): string {
  return args.filter(Boolean).join(" ");
}

/**
 * Focus ring style helper.
 * @deprecated Focus rings are now handled globally via the
 * `:focus-visible` rule in `globals.css` and the `focus-visible:*`
 * utilities. This remains only for backwards compatibility.
 */
export function ring(color: string = "var(--color-accent)") {
  return { outlineColor: color };
}