Separator

Data Display

A hairline divider for grouping content.

Live preview

Storage64%

Members12

PlanPro

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Badge, Separator } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Separator orientation="horizontal" />

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Divider direction.
decorative	boolean	true	Removes separator semantics when decorative.