Skip to content

Separator

Separate groups of content with a horizontal or vertical line.

import { Separator } from '@youj/react'

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use Separator when spacing alone does not clearly distinguish groups of content. For a labeled break in a form, such as “or” between sign-in methods, use FieldSeparator.

import { Separator } from '@youj/react'

export function Section() {
  return (
    <div>
      <p>Deployments</p>
      <Separator className="my-4" />
      <p>Domains</p>
    </div>
  )
}

It draws a 1px line in the border token and spans its container. orientation="vertical" draws it down instead, and it stretches to the height of its row, so a flex row of links needs no fixed height on the line.

Reference

Propsorientation is horizontal or vertical, and defaults to horizontal

Props

Separator adds no props of its own. They pass through to SeparatorPrimitive.Props.

orientation is horizontal or vertical, and defaults to horizontal.

Reduced motionSeparator is static

Reduced motion

Separator is static. Nothing changes under reduced motion.

AccessibilityARIA, announcements

Accessibility

  • It's a separator role with aria-orientation, from Base UI, so assistive technology hears the break between groups.
  • A purely visual line inside a single group, such as a divider between list rows, doesn't need to be announced. Draw it with a border instead.