All componentsroundedsmmd
Grid List
Interactive row lists with a sticky header, hover states, and rounded rows.
Recent deployments
- web-app2m ago
- docs-site1h ago
- api-server3h ago
Variants
Recent deployments
- web-app2m ago
- docs-site1h ago
- api-server3h ago
Sizes
Recent deployments
- web-app2m ago
- docs-site1h ago
- api-server3h ago
Recent deployments
- web-app2m ago
- docs-site1h ago
- api-server3h ago
Install
zsh — grid-list
1bunx stylexblocks add grid-listUsage — Base UI
grid-list.tsx
1234567891011121314151617181920212223242526272829import { GridList } from "#components/ui/base-ui/grid-list.tsx";
const deployments = [ ["web-app", "2m ago"], ["docs-site", "1h ago"],];
export function Example() { return ( // variant/size resolve once on Root; parts inherit them via context and // expose data-* attributes. Items is a reset <ul>; rows are <li> and are // interactive (hover/active) by default — pass interactive={false} to // opt out. <GridList.Root variant="rounded" size="md"> <GridList.Header>Recent deployments</GridList.Header> <GridList.Items> {deployments.map(([name, meta]) => ( <GridList.Item key={name} onClick={() => open(name)}> <GridList.Cell>{name}</GridList.Cell> <GridList.Cell>{meta}</GridList.Cell> </GridList.Item> ))} </GridList.Items> </GridList.Root> );}
// composition works per part — e.g. render a row as a link:// <GridList.Item render={<a href="/deploys/web-app" />}>…</GridList.Item>