# Divider

> Horizontal or vertical rule. Solid by default, dashed for the terminal-native version. Renders `<hr role="separator">`.

- Category: primitive
- Status: stable (since 0.3.0)
- A11y pattern: https://www.w3.org/WAI/ARIA/apg/patterns/
- Tokens: --background-tertiary
- Playground: https://design.freecodecamp.org/playground#divider
- npm dependencies: `react@>=18 <20`
- Registry dependencies: [theme](https://design.freecodecamp.org/registry/theme.md)
- Files:
  - `Divider.tsx` → `src/ui/divider/Divider.tsx` (raw: https://design.freecodecamp.org/registry/divider/Divider.tsx)
  - `divider.css` → `src/ui/divider/divider.css` (raw: https://design.freecodecamp.org/registry/divider/divider.css)

## Install (copy source)

1. Ensure the theme is installed once per project - tokens.css + base.css imported globally, fonts available. See https://design.freecodecamp.org/registry/theme.md and https://design.freecodecamp.org/registry/starter.md.
2. Copy the files below into `src/ui/divider/` (adjust to your project layout) and import the CSS once from your global stylesheet, e.g. `@import './ui/divider/divider.css';`.
3. Colors, spacing and type come from tokens - tailor the component by editing the copied source; recolour by editing tokens.css, not the component CSS.

## Usage

A thin structural rule. Horizontal by default, vertical when you need
to split a row of controls. Pass `decorative` for pure visual dividers
that should be invisible to assistive tech.

## Accessibility

Semantic dividers render as `<hr role="separator">`; vertical dividers
also carry `aria-orientation="vertical"`. Use `decorative` when the
rule is pure ornamentation - e.g., between inline metadata rows where
the adjacent structure already carries the boundary.

## Example

```tsx
import { Divider } from './ui/divider/Divider';

<Divider />
<Divider variant="dashed" />
<Divider orientation="vertical" />
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `orientation` | `enum` | no | `horizontal` |  |
| `variant` | `enum` | no | `solid` |  |
| `decorative` | `boolean` | no | `false` |  |

## Source: Divider.tsx

```tsx
import React, { forwardRef } from 'react';

export type DividerOrientation = 'horizontal' | 'vertical';
export type DividerVariant = 'solid' | 'dashed';

export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
  orientation?: DividerOrientation;
  variant?: DividerVariant;
  decorative?: boolean;
}

export const Divider = forwardRef<HTMLHRElement, DividerProps>(
  (
    {
      orientation = 'horizontal',
      variant = 'solid',
      decorative = false,
      className = '',
      ...rest
    },
    ref
  ) => {
    const classes = [
      'divider',
      orientation !== 'horizontal' && `divider--${orientation}`,
      variant !== 'solid' && `divider--${variant}`,
      className
    ]
      .filter(Boolean)
      .join(' ');
    const semantic = decorative
      ? { 'aria-hidden': 'true' as const }
      : {
          role: 'separator' as const,
          ...(orientation === 'vertical' && {
            'aria-orientation': 'vertical' as const
          })
        };
    return <hr ref={ref} className={classes} {...semantic} {...rest} />;
  }
);
Divider.displayName = 'Divider';
```

## Source: divider.css

```css
.divider {
  border: 0;
  border-top: 1px solid var(--background-tertiary);
  margin: 1rem 0;
  width: 100%;
  height: 0;
}
.divider--vertical {
  border-top: 0;
  border-left: 1px solid var(--background-tertiary);
  height: 100%;
  width: 0;
  margin: 0 1rem;
  display: inline-block;
  align-self: stretch;
}
.divider--dashed {
  border-top-style: dashed;
}
.divider--vertical.divider--dashed {
  border-left-style: dashed;
  border-top-style: solid;
}
```

## HTML / vanilla variant

```html
<hr class="divider" />
<hr class="divider divider--dashed" />
<span class="divider divider--vertical"></span>
```

Interactive behaviours for plain HTML come from the vanilla runtime (data-uikit-* attributes): https://design.freecodecamp.org/registry/vanilla.md - or download https://design.freecodecamp.org/cdn/uikit.global.js once and self-host it (do not hotlink).

## For coding agents

This library is distributed as copyable source, not an npm package. Start at https://design.freecodecamp.org/registry/starter.md, discover components via https://design.freecodecamp.org/llms.txt, and copy files into the consuming project. Keep token names intact; recolour by editing the copied tokens.css.