v0.2.3

Separator

A hairline between things, wrapping the Base UI Separator. It renders real separator semantics, so screen readers know the two sides are distinct; purely decorative lines can stay as CSS borders.

Playground

Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.

Variants

Two directions. Vertical stretches to the row's height inside flex layouts; horizontal spans its container's width.

Everyone with the link can view.Invited people can edit.

Styling states

The only state is direction, exposed as data-orientation on the element, so a thicker or tinted vertical rule is one selector away:

.ub-separator[data-orientation="vertical"] {
  background: var(--ub-border-strong);
}

Props

Everything a div accepts passes through, plus:

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Vertical stretches to the row's height inside flex layouts.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

Separator, from @usebones/react.
- Renders a 1px line with separator semantics. orientation "horizontal" (default) | "vertical"; vertical stretches to the row via align-self inside flex layouts.
- Menus have their own MenuSeparator; use this one everywhere else.
- Use it when the division carries meaning; decorative lines can stay as CSS borders.
- Restyle in CSS via .ub-separator and [data-orientation]. Tokens only.