Divider

Dividers are used to visually separate content in a UI.

Source Code

"use client";
 
import { cn } from "@/lib/utils";
 
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(
        "bg-border shrink-0",
        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

PropDefaultTypeDescription

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.

Vertical

Example of a vertical divider between elements.

Best Practices

  1. Semantic Usage:

    • Use semantic dividers when separating distinct sections
    • Use decorative dividers for visual separation only
  2. Spacing:

    • Maintain consistent spacing around dividers
    • Consider using margins instead of dividers for simple spacing
  3. Visual Design:

    • Keep dividers subtle and not too prominent
    • Ensure sufficient contrast with background