Separator

v0.5.9

Ready for Production

Catalyst Separator wraps the Radix UI Separator primitive with built-in design tokens and dark mode support — giving you a production-ready divider with zero configuration.

Installation

npm install @pmi/catalyst-separator

import { Separator } from '@pmi/catalyst-separator';

Common Patterns

Horizontal

The default orientation separates stacked content sections. This divider is purely visual, so it stays decorative (the default) and is hidden from assistive technologies.

Vertical

Use orientation="vertical" to divide groups of related controls, such as this toolbar. Here the separator communicates a real boundary between control groups, so it's marked decorative={false} and exposed to assistive technologies.

Styled

Extend the separator with additional Tailwind classes for rounded or thicker variants. This grouped menu uses separators to distinguish meaningful boundaries between action groups, so they're marked decorative={false}.

API Reference

Accessibility

Catalyst Separator meets WCAG 2.2 AA requirements through the following criteria:

• 1.3.1 Info and Relationships — Real structural boundaries (e.g. between groups of controls) are exposed programmatically via role="separator"; purely visual dividers are hidden so they aren't falsely announced as structure.
• 4.1.2 Name, Role, Value — When exposed, role="separator" carries an accurate aria-orientation, derived automatically from the orientation prop.

Decorative separators

Use a decorative separator when it is only a visual divider and does not provide information that users need to understand the content. This is the default behavior, and the separator is hidden from assistive technologies.

Semantic separators

Use decorative={false} only when the separator itself conveys a meaningful boundary between groups of content or controls. In this case, the separator is exposed to assistive technologies as role="separator".

Choosing the Right Component

Related

• Accordion — Collapsible grouped sections, each separated by borders
• Collapsible — A single show/hide panel
• Scroll Area — Scrollable containers with custom scrollbar styling