# Separator (Caseroom component)

A hairline between groups, horizontal or vertical. Black and white, dark mode, shadcn-compatible; React, Astro and plain HTML.

## 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`
- HTML: https://www.themes.dev/caseroom/r/html/separator.html (with https://www.themes.dev/caseroom/r/html/caseroom.css)

Page: https://www.themes.dev/caseroom/components/separator/ · Rules for agents: https://www.themes.dev/caseroom/AGENT.md

## Code

### separator.astro

```astro
---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/utils';
import { separatorClasses } from './separator.variants';

type Props = HTMLAttributes<'div'> & { orientation?: 'horizontal' | 'vertical'; decorative?: boolean };
const { orientation = 'horizontal', decorative = true, class: className, ...rest } = Astro.props;
const classes = cn(separatorClasses[orientation], className);
---

{decorative ? <div aria-hidden="true" class={classes} {...rest} /> : <div role="separator" aria-orientation={orientation} class={classes} {...rest} />}
```

### separator.tsx

```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

```tsx
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',
};
```