Docs
Next

Separator

Draw a token-styled horizontal rule between blocks of content, as an hr or a decorative div.

On this page

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.

Separator

Opening hours

Monday to Friday, 9:00 to 17:00.

Address

12 Harbour Street, Northwind.

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>
  )
}

ImportLink to this section

import { Separator } from '@systhemaui/next'

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

Variants and tagsLink to this section

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.
Tag variants

Separator.hr

Separator.div

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>
  )
}

ExamplesLink to this section

Inside a cardLink to this section

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

In a card

Studio plan

€49 per month

Unlimited pages, three editors, daily backups.

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 animationLink to this section

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.

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 instead.

PropsLink to this section

All other props go to the rendered element.

PropTypeDefaultDescription
classNamestring-
disableAnimationbooleanfalse
…and all <hr> attributes

HTML and CSSLink to this section

<hr class="separator" />
ClassStyles
separatormargin-block: var(--separator-margin-y);border-top-style: solid;border-top-width: var(--separator-line-width);border-top-color: var(--color-separator-line);

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

Next.jsLink to this section

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

AccessibilityLink to this section

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

RelatedLink to this section