Separator

A visual divider built on Radix UI Separator. Supports horizontal and vertical orientations.

Import


import { Separator } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Separator";

Props

Prop	Type	Required	Default	Description
`orientation`	`"horizontal" \| "vertical"`	—	`"horizontal"`	Direction of the separator
`decorative`	`boolean`	—	`false`	When `true`, hidden from accessibility tree

Usage


import { Separator } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Separator";
 
// Between sections
<div>
  <h2>Details</h2>
  <Separator className="my-4" />
  <p>Content below...</p>
</div>
 
// Vertical (inside a flex row)
<div className="flex items-center gap-2">
  <span>Name</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Status</span>
</div>