# Vertical

> Key-value details with row headers down the left.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/table-09).

- Page, with a live preview: https://shadcn.exchange/r/flx/table-09
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/table-09-light-96d1d0159b2e0105.png
- Registry item: https://ui.flexnative.com/r/table-09.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/table-09.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `table`

## Files

### `registry/patterns/table/table-09.tsx`

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@/components/ui/table'

const details = [
  { label: 'Full name', value: 'Olivia Martin' },
  { label: 'Email', value: 'olivia@example.com' },
  { label: 'Role', value: 'Owner' },
  { label: 'Team', value: 'Platform' },
  { label: 'Joined', value: 'Jan 12, 2025' },
]

export function Table09() {
  return (
    <div className="w-full max-w-sm">
      <div className="overflow-hidden rounded-lg border">
        <Table>
          <TableBody>
            {details.map((detail) => (
              <TableRow key={detail.label}>
                <TableHead
                  scope="row"
                  className="bg-muted/50 text-muted-foreground w-32 pt-2 align-top font-medium"
                >
                  {detail.label}
                </TableHead>
                <TableCell className="font-medium">{detail.value}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
```