Separator

Last updated: October 14, 2026

Thin horizontal or vertical divider, decorative or semantic, built on Base UI with a Radix twin.

Installation

npx smoothui-cli add separator

Features

Horizontal (default) and vertical orientation
1px line using bg-foreground/25 with shrink-0 so flex rows never squash it
decorative hides purely visual dividers from assistive technology
Base UI by default; Radix twin available via style

States

Features

A horizontal rule between blocks and vertical dividers between inline items. Give the parent a height (for example h-5) so vertical separators stretch.

Decorative

Use decorative when the line is only visual. It renders with role="none" and aria-hidden.

Accessibility

ARIA Attributes

Attribute	Element	Purpose
`role="separator"`	Root	Semantic separator (default)
`aria-orientation`	Root	`vertical` when the line is vertical
`role="none"` / `aria-hidden`	Root	Applied when `decorative` is set

Props

base-ui

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.