# Divider

> Horizontal rule, optionally carrying a short label ("or", "with your account").

Source: https://ui.jcsoftdev.com/docs/components/divider

Horizontal rule, optionally carrying a short label ("or", "with your account"). It is a
separator for assistive technology, so the label is read as part of the separator's name
rather than as page content.

## Import

```ts
import { Divider } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/divider`.

## Usage

```tsx
<Divider />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` |  | Text centered on the rule. Without it the divider is a plain hairline. |
| `classNames` | `Partial<Record<DividerPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Plain](/storybook/?path=/story/atoms-divider--plain)
- [Labelled](/storybook/?path=/story/atoms-divider--labelled)

## Source

`packages/ui/src/atoms/divider/divider.tsx`