Divider

Dividers are used to visually separate content in a UI.

Something

Something else

import { Divider } from "@/components/divider";

export default function DividerPreview() {
  return (
    <div>
      <p>Something</p>
      <Divider />
      <p>Something else</p>
    </div>
  );
}

Source Code

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

interface DividerProps extends React.ComponentPropsWithRef<"div"> {
  orientation?: "horizontal" | "vertical";
  decorative?: boolean;
}

const Divider = ({ className, orientation = "horizontal", decorative, ...props }: DividerProps) => {
  // https://github.com/radix-ui/primitives/blob/main/packages/react/separator/src/Separator.tsx
  // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
  const ariaOrientation = orientation === "vertical" ? orientation : undefined;
  const semanticProps = decorative
    ? { role: "none" }
    : { "aria-orientation": ariaOrientation, role: "separator" };

  return (
    <div
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      {...semanticProps}
      {...props}
    />
  );
};

export { Divider };

Features

Multiple Orientations: Supports both horizontal and vertical layouts
Semantic or Decorative: Can be used as a semantic separator or purely decorative element
Accessible: Proper ARIA attributes for semantic dividers

API Reference

Prop	Default	Type	Description
`orientation`	-	`"horizontal""vertical"`	The orientation of the divider.
`decorative`	-	`boolean`	Whether the divider is decorative. Doesn't add aria-orientation or role.

Examples

Horizontal

Basic usage showing a horizontal divider.

Something

Something else

import { Divider } from "@/components/divider";

export default function DividerPreview() {
  return (
    <div>
      <p>Something</p>
      <Divider />
      <p>Something else</p>
    </div>
  );
}

Vertical

Example of a vertical divider between elements.

import { Divider } from "@/components/divider";

export default function DividerVerticalPreview() {
  return (
    <nav className="flex items-center gap-2">
      <p>Home</p>
      <Divider orientation="vertical" />
      <p>About</p>
    </nav>
  );
}

Best Practices

Semantic Usage:
- Use semantic dividers when separating distinct sections
- Use decorative dividers for visual separation only
Spacing:
- Maintain consistent spacing around dividers
- Consider using margins instead of dividers for simple spacing
Visual Design:
- Keep dividers subtle and not too prominent
- Ensure sufficient contrast with background

Disclosure

Drawer