---
title: "Separator"
description: "Draw a token-styled horizontal rule between blocks of content, as an hr or a decorative div."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/components/separator
version: unreleased (main)
docs_index: https://docs.systhema.app/cs/llms.txt
---
> This page isn't translated yet. Showing English.


`Separator` draws a horizontal hairline with the separator tokens: `--separator-line-width` thick, in `--color-separator-line`, with `--separator-margin-y` above and below. Use it to mark a change of topic inside a section or card.

```tsx preview title="Separator"
import { Heading, Paragraph, Separator } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="w-full max-w-md">
      <Heading.h4>Opening hours</Heading.h4>
      <Paragraph>Monday to Friday, 9:00 to 17:00.</Paragraph>
      <Separator />
      <Heading.h4>Address</Heading.h4>
      <Paragraph>12 Harbour Street, Northwind.</Paragraph>
    </div>
  )
}
```

## Import

```tsx
import { Separator } from '@systhemaui/next'
```

In a React app without Next.js, import it from `@systhemaui/react`.

## Variants and tags

`Separator` renders an `<hr>`. Two tag variants pick the element explicitly:

- `Separator.hr`: the same `<hr>`, a thematic break that screen readers announce as a separator.
- `Separator.div`: a `<div>` with the same look, for a purely visual line.

```tsx preview title="Tag variants"
import { Paragraph, Separator } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="w-full max-w-md">
      <Paragraph type="label">Separator.hr</Paragraph>
      <Separator.hr />
      <Paragraph type="label">Separator.div</Paragraph>
      <Separator.div />
    </div>
  )
}
```

## Examples

### Inside a card

The separator's block margin follows the token rhythm, so it fits between the content of any rich-text box.

```tsx preview title="In a card"
import { Card, Heading, Paragraph, Separator } from '@systhemaui/next'

export default function Demo() {
  return (
    <Card variant="default" className="w-full max-w-sm">
      <Heading.h4>Studio plan</Heading.h4>
      <Paragraph type="lead">€49 per month</Paragraph>
      <Separator />
      <Paragraph type="small">Unlimited pages, three editors, daily backups.</Paragraph>
    </Card>
  )
}
```

### Without the reveal animation

`Separator` gets the project's `packages.react.animationClasses`, so it fades in on scroll like headings and paragraphs. `disableAnimation` turns that off for one separator.

```tsx
import { Separator } from '@systhemaui/next'

export function StaticRule() {
  return <Separator disableAnimation />
}
```

For hairlines between the items of a row or list, use the `divider` prop of [`Stack`](https://docs.systhema.app/cs/components/stack.md#dividers) instead.

## Props

All other props go to the rendered element.

<!-- generated:props @systhemaui/react SeparatorProps -->

| Prop                       | Type      | Default | Description |
| -------------------------- | --------- | ------- | ----------- |
| `className`                | `string`  | -       |             |
| `disableAnimation`         | `boolean` | `false` |             |
| …and all `<hr>` attributes |           |         |             |

<!-- /generated -->

## HTML and CSS

```html
<hr class="separator" />
```

<!-- generated:utilities separator -->

| Class       | Styles                                                                                                                                                                           |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `separator` | `margin-block: var(--separator-margin-y);`<br>`border-top-style: solid;`<br>`border-top-width: var(--separator-line-width);`<br>`border-top-color: var(--color-separator-line);` |

<!-- /generated -->

Change the line with the `separator.lineWidth` and `separator.marginY` sizing tokens and the `separator.line` color token.

## Next.js

`@systhemaui/next` re-exports `Separator` from `@systhemaui/react` unchanged.

## Accessibility

`<hr>` has the `separator` role, so assistive technology announces it as a break between topics. When the line is decoration only, use `Separator.div`, which is not announced.

## Related

- [Stack](https://docs.systhema.app/cs/components/stack.md) (its `divider` prop draws hairlines between items)
- [Columns](https://docs.systhema.app/cs/components/columns.md#dividers)
- [Color tokens](https://docs.systhema.app/cs/design/color-tokens.md)