Vertical Separator for React

When content flows in a row: navigation links, toolbar actions, metadata such as author and date. With three or more items, a line is clearer than a gap alone. Don't put one between every word, or between items that already have borders.

As tall as its row: give the parent a height (h-5) and items-center, and the Separator stretches to fill it. Match the row to the text line, or slightly taller. A height class on the Separator itself works too, but then each line needs it.

gap-4 on the flex row gives a 16 pixel pause on both sides, as here; gap-2 suits compact navigation. Keep it even so the line reads as a divider, not a margin on one item.

The default is horizontal, which draws a full-width line. orientation="vertical" switches the line to one pixel wide and full height, and tells assistive tech the orientation.

flex items-center gap-4 on the row, with an explicit height. items-center keeps the text centered next to the line, and gap spaces lines and items evenly where space-x-* margins wouldn't.

Yes: each line has role separator with a vertical aria-orientation. For purely visual dividers in a long row, a border on the items is quieter.