Grid list

Shows a list of interactive rows that you can select and act on.

Project brief PDF

Brand assets Folder

Meeting notes Text

grid-list-demo.tsx

"use client";import { GridList, GridListItem } from "@/components/vip-ui/grid-list";export function GridListDemo() {  return (    <GridList      aria-label="Project files"      selectionMode="single"      className="w-full max-w-sm"    >      <GridListItem id="brief" textValue="Project brief">        Project brief{" "}        <span className="ms-auto shrink-0 text-xs text-muted-foreground">          PDF        </span>      </GridListItem>      <GridListItem id="assets" textValue="Brand assets">        Brand assets{" "}        <span className="ms-auto shrink-0 text-xs text-muted-foreground">          Folder        </span>      </GridListItem>      <GridListItem id="notes" textValue="Meeting notes">        Meeting notes{" "}        <span className="ms-auto shrink-0 text-xs text-muted-foreground">          Text        </span>      </GridListItem>    </GridList>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-grid-list.json

Unavailable row

Set isDisabled on the row and show the reason in it.

Project brief

Draft reportProcessing

grid-list-disabled-demo.tsx

"use client";import { GridList, GridListItem } from "@/components/vip-ui/grid-list";export function GridListDisabledDemo() {  return (    <GridList      aria-label="Project files"      selectionMode="single"      className="w-full max-w-sm"    >      <GridListItem id="brief" textValue="Project brief">        Project brief      </GridListItem>      <GridListItem id="draft" textValue="Draft report" isDisabled>        Draft report        <span className="ms-auto shrink-0 text-xs text-muted-foreground">          Processing        </span>      </GridListItem>    </GridList>  );}

API reference

Grid list takes the props of React Aria GridList (opens in a new tab).