Skip to content
themes.dev
    Style: Wireframe

    Components

    56 free

    Style

    Components · Layout

    Separator

    A hairline between groups, horizontal or vertical.

    themes.dev UI

    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/ui/r/separator.json
    Astro
    npx shadcn@latest add https://www.themes.dev/ui/r/astro/separator.json

    Or copy the files below into your project. They need clsx, tailwind-merge, and the themes.dev UI 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',
};