Divider

Use a classless <hr /> for the default 1px divider with standard vertical spacing and the primary ornament color.

Content above the divider.

---

Content below the divider.

Show codeHide code

<p>Content above the divider.</p>
<hr />
<p>Content below the divider.</p>

Custom styling

Adding any class to <hr> removes the default styles. Rebuild with utility classes: border-t for the line, my-* for spacing, and optional width or color classes.

Use w-sm mx-auto for a short centered divider, or border color utilities like border-primary or border-secondary to change the line color.

Vertical divider

Use border-l on a <div> with role="separator" and aria-orientation="vertical". The parent must have a defined height.

Accessibility

• A plain <hr /> has an implicit separator role. No extra attributes needed
• For vertical dividers, add role="separator" and aria-orientation="vertical" since <div> has no semantic meaning
• Decorative dividers that don’t convey structure can use role="presentation" to hide them from assistive technology