List Separator for React

For a short vertical stack of names and values, three to seven rows. Switch to a Table when you have columns, sorting or more than a handful of rows.

Each row is a name and a value. A definition list tells assistive tech that the two belong together; the Separator only draws the line. A stack of div elements loses that pairing.

gap-2 between rows and lines, as here. At gap-4 the rows start to feel like separate sections rather than one list.

No. The lines go between rows; a trailing line usually clashes with the card or page edge below the list.

Yes. The simplest way is horizontal padding on the list, which keeps every line at full width inside it. To inset only the lines, use margins plus a width override, as the Inset Separator example does.

The definition list already expresses the structure, so the lines add nothing for screen reader users. They're exposed as separators; for a long list, borders on the rows are quieter than a Separator between each one.