Break Component

The Break component creates a subtle horizontal line that helps separate content sections. Its minimal design adds visual structure without overwhelming your layout.

Basic Usage

Add a simple visual break between content sections:

Customization

The Break component accepts custom classes for styling flexibility:

Orientation

The Break component can be oriented vertically:

Implementation

Adding breaks to your content is straightforward:

1
<div class="space-y-4">
2
    <p>First section of content</p>
3
    <Break />
4
    <p>Second section of content</p>
5
    <Break class="w-1/2" />
6
    <p>Third section of content</p>
7
</div>

Common Uses

• Separating content sections

• Creating visual rhythm

• Dividing long articles

• Structuring form sections

• Breaking up different topics