Separator

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.

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.

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.

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.

HTML and CSSLink to this section

<hr class="separator" />

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

• Stack (its divider prop draws hairlines between items)
• Columns
• Color tokens