Divider

Installation

npx vayu-ui init #one time only

npx vayu-ui add divider

npx vayu-ui add -t divider #with test case needs

Usage

<Divider />

<div className="flex items-center h-5 gap-2">
  <span>Blog</span>
  <Divider orientation="vertical" />
  <span>Docs</span>
  <Divider orientation="vertical" />
  <span>Source</span>
</div>

<Divider>
  <Divider.Line />
  <Divider.Label>OR</Divider.Label>
  <Divider.Line />
</Divider>

<Divider>
  <Divider.Line variant="dashed" color="brand" />
  <Divider.Label color="brand">Brand</Divider.Label>
  <Divider.Line variant="dashed" color="brand" />
</Divider>

<Divider>
  <Divider.Line size="thick" />
  <Divider.Label>Thick</Divider.Label>
  <Divider.Line size="thick" />
</Divider>

<Divider>
  <Divider.Line variant="dotted" color="destructive" />
  <Divider.Label color="destructive">Error</Divider.Label>
  <Divider.Line variant="dotted" color="destructive" />
</Divider>

<Divider spacing="lg" />

Anatomy

<Divider>
  <Divider.Line />
  <Divider.Label>Label</Divider.Label>
  <Divider.Line />
</Divider>

• Divider — Root container. Renders a default line when no children are provided.
• Divider.Line — A single line segment with variant, color, and size controls.
• Divider.Label — Text rendered between divider lines.

Accessibility

• Keyboard support: The divider is a non-interactive element and does not require keyboard handling.
• ARIA attributes: By default, renders with role="separator" and aria-orientation matching the orientation prop. When decorative={true}, the divider is hidden from assistive technology via aria-hidden="true". When children (labels) are present, no role is applied since the content is readable.
• Focus behavior: The divider is not focusable and does not participate in tab order.

Screen reader behavior

• Default (no children): Announced as a separator. Screen readers may say "horizontal separator" or "vertical separator" depending on orientation.
• With label (children): No separator role is applied. The label text is read naturally as part of the page content flow.
• Decorative: Completely hidden from assistive technology. Screen readers skip it entirely.

Component Folder Structure

Divider/
├── Divider.tsx        # Root layout + compound assembly
├── DividerLine.tsx    # Line subcomponent with variant/color/size
├── DividerLabel.tsx   # Label subcomponent
├── types.ts           # Types, interfaces, design token maps
├── index.ts           # Public API exports
└── README.md          # Component documentation

Props

Divider

Divider.Line

Divider.Label