Separator

Separators divide related sections while keeping the layout quiet and scannable.

Overview and decision boundary

Use Separator to divide related content sections without adding visual weight.

Do not use separators as a replacement for spacing rhythm.

Overview

Activity

1import { Separator } from '@nerio-ui/ui';23<Separator />4<Separator orientation="vertical" />

Installation and imports

Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.

1pnpm exec nerio add separator23import { Separator } from '@nerio-ui/ui';

Usage

1import { Separator } from '@nerio-ui/ui';23<Separator />4<Separator orientation="vertical" />

Variants

Variant	Purpose
`orientation: horizontal \| vertical`	Orientation: horizontal \| vertical is part of the public component contract.

Anatomy

Slot	Purpose
`root`	Native rule using the subtle border token.

States

State	Purpose
`Static`	Uses native hr semantics without interaction or motion.

Motion

State changes should use shared motion tokens and preserve reduced-motion behavior.

Accessibility

Renders an hr element for semantic separation.
Use for related sections, not as a replacement for spacing.
Keep separators subtle across themes.

Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.

API

Prop	Purpose
`className`	Extends the component root while preserving Nerio tokenized defaults.

Implementation contract

Contract	Value
`Registry item`	separator installs 5 source files into the configured components directory.
`Base UI`	No interactive primitive required.
`Registry dependencies`	None.
`Package dependencies`	clsx, react, tailwind-merge, tailwindcss

Styling contract

Contract	Value
`Authoring`	`Complete, statically detectable Tailwind CSS v4 recipes own component visuals.`
`Values`	`Semantic and component --n-* variables remain the canonical customization layer.`
`Overrides`	`Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.`
`Residual CSS`	`Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.`

Design notes

Use Separator to divide related content sections without adding visual weight.

Do / do not

Use separators sparingly to support scanability.

Do not