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.
Preview
Overview
Activity
Activity
import { Separator } from '@nerio-ui/ui';<Separator />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add separatorimport { Separator } from '@nerio-ui/ui';Usage
import { Separator } from '@nerio-ui/ui';<Separator />Variants
| Variant | Purpose |
|---|---|
Default | Separates stacked content. |
Anatomy
| Slot | Purpose |
|---|---|
root | Native horizontal 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.
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
Do
Use separators sparingly to support scanability.
Do not
Do not use separators as a replacement for spacing rhythm.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-color-border-subtle | Public customization point for this component contract. |