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 — Ark UI
grid-list.tsx
12345678910111213141516171819202122232425262728import { GridList } from "#components/ui/ark-ui/grid-list.tsx";
const deployments = [ ["web-app", "2m ago"], ["docs-site", "1h ago"],];
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context. 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 asChild><a href="/deploys/web-app">…</a></GridList.Item>