# Hairline: Lists and cards

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

Example: https://hextaui.com/docs/hairline/examples/list
Component docs: https://hextaui.com/docs/hairline.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/hairline-list.json
```

This adds `components/examples/hairline/list.tsx` with the Hairline component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/hairline/list.tsx"
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>
  )
}
```