Skip to content
Caseroom

Caseroom

Components and blocks in black and white.

Components · Layout

Separator

A hairline between groups, horizontal or vertical.

Caseroom

Components in black and white.

DocsBlocksTheme

Both previews render the same markup; the HTML tab below is that markup without a framework.

Install

React
npx shadcn@latest add https://www.themes.dev/caseroom/r/separator.json
Astro
npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/separator.json

Or copy the files below into your project. They need clsx, tailwind-merge, and the Caseroom theme. The HTML needs only the compiled CSS.

separator.tsx
import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
import { separatorClasses } from './separator.variants';

export type SeparatorProps = HTMLAttributes<HTMLElement> & {
  orientation?: 'horizontal' | 'vertical';
  /** Decorative separators are hidden from screen readers (the default). */
  decorative?: boolean;
};

export function Separator({ orientation = 'horizontal', decorative = true, className, ...props }: SeparatorProps) {
  const classes = cn(separatorClasses[orientation], className);
  if (decorative) return <div aria-hidden="true" className={classes} {...props} />;
  return <div role="separator" aria-orientation={orientation} className={classes} {...props} />;
}
separator.variants.ts
export const separatorClasses = {
  horizontal: 'h-px w-full shrink-0 border-0 bg-border',
  vertical: 'h-full w-px shrink-0 self-stretch bg-border',
};