Photonix UI - React Components, Templates & Figma Design System

Divider

A visible line to separate content.

Content Above

Content Below

Usage

import { Divider } from '@photonix/ultimate';

<Divider />

Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	`'horizontal'`	Orientation of the divider
variant	`"solid" \| "dashed"`	`'solid'`	Visual style of the divider
thickness	`1 \| 0.5`	`1`	Thickness of the divider line

Vertical dividers generally require a height on the parent.

Horizontal

Divider

Vertical

Divider

Direction

<Divider direction="horizontal" />
<Divider direction="vertical" />