# Responsive Table To Cards

Invoice listing that must remain usable on a mobile device.

- id: `responsive-table-to-cards`
- Page: https://agentic-ui-kit.com/components/responsive-table-to-cards
- Live preview: https://agentic-ui-kit.com/live/component/responsive-table-to-cards

## Install

```bash
agentic-ui add responsive-table-to-cards
npx shadcn@4.17.0 add @agentic-ui/responsive-table-to-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** container-query-layout, table-to-card-collapse, column-card-roles, shared-sort-state, typed-value-sorting, row-selection, select-all-tristate, row-actions, empty-state, single-layout-mount
- **Intents:** manage-collection, explore-detail
- **Suits domains:** saas, ecommerce, billing, operations, logistics
- **Interaction:** sort, select-row, select-all, row-actions, layout-switch
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** invoice listing that must remain usable on a mobile device, order table embedded in a narrow side panel on the same screen, inventory with a right-aligned amount that sorts by numeric value rather than text, empty collection after applying filters, which informs instead of painting a grid with no rows
- **Avoid when:** comparison tables where the value lies in reading several aligned rows at once, which the card breaks, fewer than three columns, where the table already fits on mobile and the card only adds height
- **Preserve when adapting:** column-model, card-role-mapping, sort-semantics, selection-model
- **Replace when adapting:** domain-copy, columns, status-enum, formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, card, checkbox, badge, button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives