Separator

Thin visual divider used to group related content, split toolbar items, and create clearer boundaries between adjacent sections.

AccessibleDark Mode

Install

$npx react-principles add separator

Live Demo

Open in Storybookopen_in_new

Profile Settings

Billing Settings

Daily

Weekly

Code Snippet

src/ui/Separator.tsx

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

<div className="space-y-4">
  <p>Account</p>
  <Separator />
  <p>Billing</p>
</div>

Copy-Paste (Single File)

Separator.tsx

import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export type SeparatorOrientation = "horizontal" | "vertical";

export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
  orientation?: SeparatorOrientation;
  decorative?: boolean;
}

export function Separator({
  orientation = "horizontal",
  decorative = true,
  className,
  ...props
}: SeparatorProps) {
  return (
    <div
      role={decorative ? "presentation" : "separator"}
      aria-orientation={orientation}
      className={cn(
        "shrink-0 bg-slate-200 dark:bg-[#1f2937]",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className
      )}
      {...props}
    />
  );
}

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Switches between horizontal and vertical dividers.
`decorative`	`boolean`	`true`	Controls whether the separator is announced to assistive technologies.
`className`	`string`	`—`	Additional classes merged into the divider element.

react-principles