Component

Separator

The default divider is decorative. Use decorative={false} for a meaningful section boundary.

Preview

First section

Second section

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add separator

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Separator } from '@nimjs/ui';

export function Example() {
  return (
    <Separator decorative={false} />
  );
}

System metadata

Registry

separator

Category: display

Status: preview

Version marker: 0.0.0 (unreleased)

Files

separator.tsx

Tokens

border

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

native semanticsscreen reader readable

Anatomy

Separator

Separator part of the separator component.

Usage patterns

basic use

Set decorative false when the divider carries meaning.

API and states

The default divider is decorative. Use decorative={false} for a meaningful section boundary.

Accessibility

Semantic separators expose orientation; decorative separators are removed from the accessibility tree.