Overview
The Divider element renders as an <hr> tag with border-t border-gray-300 my-8 default classes. It creates a horizontal line to visually separate content sections.
Unlike the Spacer element which adds invisible space, the Divider provides a visible line that clearly demarcates the boundary between different content areas.
Use a Spacer when you need invisible vertical space. Use a Divider when you want a visible line to separate sections. Dividers include built-in margin (my-8) so content doesn't touch the line.
Settings
Configure your divider using these settings in the Inspector panel:
| Setting | Description | Options | Default |
|---|---|---|---|
| Color | Border color using Tailwind color classes | border-gray-300, border-gray-400, border-blue-500, any Tailwind border color |
border-gray-300 |
| Width (thickness) | Border thickness | border-t (1px), border-t-2 (2px), border-t-4 (4px) |
border-t |
| Margin | Vertical margin for spacing above and below | my-4, my-8, my-12, etc. |
my-8 |
| Style | Border style | solid, dashed, dotted |
solid |
| Width (horizontal) | Line width as a percentage of container | w-full (100%), w-3/4 (75%), w-2/3 (66%), w-1/2 (50%) |
w-full |
When using a partial width (like w-1/2), add mx-auto to center the divider horizontally within its container.
Examples
Standard Divider
A full-width light gray divider with default spacing:
<p>Content above the divider...</p>
<hr class="border-t border-gray-300 my-8">
<p>Content below the divider...</p>Dashed Divider
A dashed line style for a lighter visual separation:
<hr class="border-t border-dashed border-gray-300 my-8">Centered Short Divider
A half-width divider centered in its container:
<hr class="border-t border-gray-300 my-8 w-1/2 mx-auto">Colored Divider
A thicker, colored divider for emphasis:
<hr class="border-t-2 border-blue-500 my-12">Dotted Divider
A dotted line style for subtle separation:
<hr class="border-t border-dotted border-gray-400 my-6">