Components

Divider

Horizontal/vertical dividing line for visual content separation

Overview

Divider is a dividing line component. It renders a horizontal or vertical visual separator.

  • Orientation — horizontal (default) or vertical
  • Variant — solid (default) or dashed
  • Zero config — Usable with just <Divider /> without any props

Basic Usage

Section 1

Section 2

Variants

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction
variant'solid' | 'dashed''solid'Line style
color'default''default'Color (borderDefaultDefault token)
thickness'thin''thin'Thickness (stroke.border token)

Guidelines

  • When using a vertical Divider, the parent element must have a defined height
  • Use Divider for logical section separation; use Stack's gap for simple spacing