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

'use client';

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