shadcn.io is an independent project built on shadcn/ui
Three rows stack up: Item 1 with Value 1, Item 2 with Value 2, and Item 3 with Value 3. A horizontal line sits between the rows, and the values are muted.
Use the lines for a short definition list that should not look like a table. A Data List fits when the pairs are the whole component. In React, Ark UI does not label the line.
Installation
Anatomy
Usage
<div className="flex w-full max-w-sm flex-col gap-2 text-sm">
<dl className="flex items-center justify-between">
<dt>Item 1</dt>
<dd className="text-muted-foreground">Value 1</dd>
</dl>
<Separator />
<dl className="flex items-center justify-between">
<dt>Item 2</dt>
<dd className="text-muted-foreground">Value 2</dd>
</dl>
<Separator />
<dl className="flex items-center justify-between">
<dt>Item 3</dt>
<dd className="text-muted-foreground">Value 3</dd>
</dl>
</div>FAQ
When should I use list separators instead of a table?
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.
Why use dl, dt and dd?
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.
How tight should the list be?
gap-2 between rows and lines, as here. At gap-4 the rows start to feel like separate sections rather than one list.
Should the last row have a separator under it?
No. The lines go between rows; a trailing line usually clashes with the card or page edge below the list.
API Reference
Separator
No extra props in this demo. The rest is on the Separator page.
