Simple Line Separator for React

Horizontal orientation, one pixel tall, full width, bg-border and shrink-0. The color follows the --border token, so the line tracks light and dark themes without extra classes.

Add classes in className. Color is a background utility, such as bg-primary. Thickness has to use the component's orientation variant, data-horizontal:h-1, so it replaces the default height instead of losing to it.

Inside a parent that already sets the spacing, such as a flex column with a gap, or as a specimen in a style guide. Real screens almost always pair it with content, as the Horizontal Separator and List Separator examples do.

Yes. The element has role separator and an aria-orientation.

Prefer a gap on a flex parent over margins on the line: the gap keeps the rhythm even when the siblings change. Use my-* only when the separator must own its spacing, as the With Margins example does.

No. A Separator is one styled element with a few attributes and no behavior. Render as many as the layout needs.