Hairline: Lists and cards

Plain border and divide-y. Thinner separators group rows without boxing them in.

Plan: Pro
Seats: 12
Billing: Yearly
Renews: Mar 4, 2027

const rows = [
  ["Plan", "Pro"],
  ["Seats", "12"],
  ["Billing", "Yearly"],
  ["Renews", "Mar 4, 2027"],
]

export function HairlineList() {
  return (
    <dl className="w-full max-w-xs divide-y rounded-xl border text-sm">
      {rows.map(([term, value]) => (
        <div key={term} className="flex justify-between px-4 py-3">
          <dt className="text-muted-foreground">{term}</dt>
          <dd>{value}</dd>
        </div>
      ))}
    </dl>
  )
}

Add this example

This adds the example as components/examples/hairline/list.tsx, together with the Hairline component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/hairline-list.json

To add only the component, follow the Hairline installation.