Horizontal Separator for React

When sections are related but distinct and spacing alone is ambiguous. Pair the Separator with a heading, so people who see the line get a visual break and the headings still carry the structure. Skip it between every paragraph, or where cards already draw a boundary.

flex flex-col gap-4 gives a comfortable 16 pixel rhythm, as here. Tighten to gap-2 for dense lists, or open to gap-8 for major breaks. The gap is equal above and below, so the line sits in the middle of the pause.

Pass classes in className. The line is painted with a background, so color uses bg-* utilities. Thickness has to use the same orientation variant as the component, such as data-horizontal:h-1, so it replaces the default one-pixel height rather than losing to it.

Yes. The line has role separator, so screen readers can announce it. When it's only visual, a border on a neighbor is quieter than a Separator.

Usually not: a full-width line works at every width. If a mobile layout turns the sections into cards, drop the separator there and keep it where the page is one column.

Rely on headings for the structure and use the line as a visual aid. Check that the border color has enough contrast against the page background, so people with low vision still see the division.