Data display · Application UI
Resource list
List-view of selectable rich rows (ResourceList + ResourceItem), media, title, metadata, badges, hover actions, bulk selection. The list counterpart of index-table.
@byronwade/foundation@byronwade/badge@byronwade/bulk-action-bar@byronwade/checkbox@byronwade/demo-viewport@byronwade/entity-row@byronwade/utils
Feature showcase
Installation
Features
Density and inset framing
Compact/default/comfortable rows pair with a default or inset frame for admin indexes.
Selectable rich rows
ResourceItem rows support media, title, subtitle, badges, hover actions, and bulk selection.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| density | "compact" | "default" | "comfortable" | "default" | Row density for scan-heavy lists. Compact tightens rows; comfortable adds breathing room. |
| frame | "default" | "inset" | "default" | Surface treatment. Use `inset` for Shopify-style admin panels set into a muted frame. |
| selectable | boolean | false | Enables list-level selection and select-all behavior for child ResourceItem rows. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/badge | registry | Installed through the byronwade/ui registry. |
| @byronwade/bulk-action-bar | registry | Installed through the byronwade/ui registry. |
| @byronwade/checkbox | registry | Installed through the byronwade/ui registry. |
| @byronwade/demo-viewport | registry | Installed through the byronwade/ui registry. |
| @byronwade/entity-row | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/resource-list.tsx |
| Default example | content/examples/resource-list/default.tsx |
| Compact example | content/examples/resource-list/compact.tsx |
| Inset example | content/examples/resource-list/inset.tsx |
| Compact Inset example | content/examples/resource-list/compact-inset.tsx |
| Comfortable example | content/examples/resource-list/comfortable.tsx |
| Comfortable Inset example | content/examples/resource-list/comfortable-inset.tsx |
| Empty example | content/examples/resource-list/empty.tsx |
| Loading example | content/examples/resource-list/loading.tsx |
| No Media example | content/examples/resource-list/no-media.tsx |
| Selectable example | content/examples/resource-list/selectable.tsx |
| With Actions example | content/examples/resource-list/with-actions.tsx |