Divider

The Divider component is used to visually separate content in layouts.
It supports horizontal and vertical orientations, custom thickness, variants, and even allows embedding children (like text or labels) inside the divider.

import { Divider } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	Defines the orientation of the divider.
variant	Variant from dividerVariants	-	Controls style variant (e.g., solid, dashed, etc. based on your variants).
tone	Variant from dividerVariants	-	Controls the color tone of the divider.
flexItem	boolean	false	If true, stretches the divider to fill available flex space.
thickness	number	1	Sets the divider thickness (in pixels).
children	React.ReactNode	-	Content displayed inside the divider (usually a label).
className	string	-	Additional Tailwind CSS classes.
...props	React.HTMLAttributes<HTMLDivElement>	-	Standard HTML attributes passed to the rendered element.

Usage

Horizontal Divider (default)

<Divider />

Vertical Divider

<div className="flex h-10 items-center space-x-2">
  <span>Item 1</span>
  <Divider orientation="vertical" />
  <span>Item 2</span>
</div>

Custom Thickness

<Divider thickness={4} />

With Label

<Divider>OR</Divider>

Custom Tone

<Divider tone="primary" />
<Divider tone="muted" />
<Divider tone="destructive" />

Notes

• When using children, the divider renders two lines with the content centered between them.
• Vertical dividers should typically be used inside a flex container (flex-row).
• Thickness is applied as height (for horizontal) or width (for vertical).