CatalystSeparatorv0.5.7Ready for Production
Visually divide content sections with horizontal and vertical dividers for application interfaces, dashboards, and data displays.
Project Settings
Manage your project configuration.
Installation
Install the Separator component from the Catalyst component library:
npm install @pmi/catalyst-separatorAPI
Separator is a styled wrapper around the Radix UI Separator primitive. It accepts all the same props without any additions or modifications.
Accessibility
Built on Radix UI Separator, following the WAI-ARIA separator role specification.
Design Guidance
When to Use
- Settings panels: Divide groups of related options within a settings or configuration view.
- Dashboard metrics: Separate stat blocks, KPI cards, or summary figures.
- Navigation menus: Group related menu items into logical sections.
- List views: Break long lists into scannable groups.
When to Use a Border Instead
For many common patterns such as sidebars, form field groups, cards, footers, etc a CSS border on the containing element is simpler and more maintainable than inserting a separate component. Reach for Separator when you need a standalone divider between sibling elements. Reach for a border when the divider is part of a container's own styling.
ScrollArea
A custom scrollbar component for product interfaces with customizable styling via className overrides. Supports vertical/horizontal scrolling, container queries, and brand theming.
Stepper
A multi-step progress indicator component with orb, linear, and segmented variants for guiding users through sequential workflows.