Neumorphism UI
Data & feedback@neumorphism-ui/separator

Separator

Supports horizontal and vertical orientations and is decorative by default. For a meaningful section boundary, set decorative=false to expose the separator role and aria-orientation.

@neumorphism-ui/separator
Registry JSON

Preview

Neumorphism UICopy the source. Own the surface.
PreviewInstallationAPI

Installation

Installation: separatornpx shadcn@latest add @neumorphism-ui/separator

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

Separator import code
import { Separator } from "@/components/ui/separator"

Example

Separator usage code
<div>
  <section>Profile settings</section>
  <Separator className="my-6" />
  <section>Notification settings</section>
</div>

API Reference

ComponentPropTypeDefaultDescription
Separatororientation"horizontal" | "vertical""horizontal"Sets the divider orientation and size styles.
SeparatordecorativebooleantrueWhen true, hides the decorative element; when false, applies role=separator.
SeparatorclassNamestring—Extends spacing, length, and minimum-height styles.

Accessibility

  • 01

    Keep the default decorative=true for a purely visual boundary.

  • 02

    For a structurally meaningful document boundary, use decorative=false to expose role=separator.

  • 03

    A vertical separator requires height from its parent or an explicit height set with className.