Neumorphism UI

Separator

Use Separator to mark a boundary between related sections or groups of controls.

Preview

Horizontal and vertical boundaries

Separate the document introduction from its links with a horizontal line, then divide Preview, Installation, and API links vertically.

Component documentationExamples, installation steps and component properties.
PreviewInstallationAPI

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/separator

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Place it between content groups and choose horizontal or vertical orientation. Set decorative to false only when the boundary should be announced as a separator.

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

export default function Example() {
  return (
    <div>
      <p>Profile settings</p>
      <Separator className="my-4" />
      <p>Notification settings</p>
    </div>
  );
}

API Reference

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.

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.