Separator

A hairline between two groups, across a column or down a row. Decorative by default, so it is not announced.

server - 0 KB

Separator

server - 0 KB

A hairline between two groups, across a column or down a row. Decorative by default, so it is not announced.

Install

Profile

Billing

Try it

orientation

decorative

The code

separator.tsx

import { Separator } from 'topclassui/separator'

<div className="flex min-h-5 flex-wrap items-center gap-3 text-sm text-body">
  <span>Profile</span>
  <Separator />
  <span>Billing</span>
</div>

A vertical Separator takes its height from a flex or grid row; give the row a height or let it stretch.

Every state

2 states

Account

Security

Horizontal

Draft

Edited 2 hours ago

Vertical

Import from the package

topclassui/separator

import { Separator } from 'topclassui/separator'

Install once:npm i topclassui@beta zod

Examples

For a hairline between two groups: sections of a form, items of a menu, two facts on one row.
It has no margin of its own, so the gap and padding of its parent space it.
In a block parent a vertical separator is 0 px tall: put it in a flex or grid row.
The line is a border at the line-width token, so it survives forced colours.

horizontal

Personal details

Name, email address and phone number.

horizontal.tsx

import { Separator } from 'topclassui/separator'

/** As in the docs sample, the gap of the column spaces the line, which has no margin of its own. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <p className="text-base text-body">Personal details</p>
      <Separator />
      <p className="text-sm text-muted">Name, email address and phone number.</p>
    </div>
  )
}

vertical

Draft

Edited 2 hours ago

vertical.tsx

import { Separator } from 'topclassui/separator'

/** The row has a height, and the line stretches to it although the row centres its items. */
export default function Demo() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm text-body">
      <span>Draft</span>
      <Separator orientation="vertical" />
      <span>Edited 2 hours ago</span>
    </div>
  )
}

semantic

Account settings

Profile

Billing

semantic.tsx

import { Separator } from 'topclassui/separator'

/** decorative={false}: each line is a separator a screen reader announces with its orientation. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4 text-sm text-body">
      <p>Account settings</p>
      <Separator decorative={false} />
      <div className="flex h-5 items-center gap-3">
        <span>Profile</span>
        <Separator orientation="vertical" decorative={false} />
        <span>Billing</span>
      </div>
    </div>
  )
}

In Arabic, right to left

البيانات الشخصية

مسودة

عُدّلت قبل ساعتين

rtl.tsx

import { Separator } from 'topclassui/separator'

/** Right to left: the vertical line is the inline-start border, the right edge of its box here. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col gap-4 text-sm text-body">
      <p className="text-base">البيانات الشخصية</p>
      <Separator />
      <div className="flex h-5 items-center gap-3">
        <span>مسودة</span>
        <Separator orientation="vertical" />
        <span>عُدّلت قبل ساعتين</span>
      </div>
    </div>
  )
}

Props

The props of Separator
Prop	Type	Default	Limits	Description
`decorative`	`boolean`	`true`	-	Keeps the line out of the accessibility tree; false announces it as a separator.
`orientation`	`horizontal` \| `vertical`	`"horizontal"`	-	Which way the line runs: across its container, or down the height of a flex row.

Keyboard and accessibility

Nothing to operate: it is not interactive on its own.

By default it renders role="none" and stays out of the accessibility tree.
Pass decorative={false} when it divides content a reader should hear as separate: it becomes a separator with its aria-orientation.
The line uses --tc-line, which is decorative and exempt from the 3:1 contrast rule; never let it be the only thing that separates meaning.

Right to left

The vertical line is the inline-start border of its box, so it mirrors with the page and needs no RTL class.

Server and client

Renders on the server and ships no JavaScript.

Files: index.tsx.

On the chip: server - 0 KB.