grid-list-actions

PreviousNext
Docs
takiexample

Preview

Loading preview…
registry/new-york/examples/grid-list-actions.tsx
import { InfoIcon } from "lucide-react"

import { Button } from "@/registry/new-york/ui/button"
import { GridList, GridListItem } from "@/registry/new-york/ui/grid-list"

export default function GridListActions() {
  return (
    <GridList aria-label="Favorite pokemon" className="w-64">
      <GridListItem textValue="Charizard">
        Charizard
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label="Info"
          className="ml-auto"
        >
          <InfoIcon />
        </Button>
      </GridListItem>
      <GridListItem textValue="Blastoise">
        Blastoise
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label="Info"
          className="ml-auto"
        >
          <InfoIcon />
        </Button>
      </GridListItem>
      <GridListItem textValue="Venusaur">
        Venusaur
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label="Info"
          className="ml-auto"
        >
          <InfoIcon />
        </Button>
      </GridListItem>
      <GridListItem textValue="Pikachu">
        Pikachu
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label="Info"
          className="ml-auto"
        >
          <InfoIcon />
        </Button>
      </GridListItem>
    </GridList>
  )
}

Installation

npx shadcn@latest add @taki/grid-list-actions

Usage

import { GridListActions } from "@/components/grid-list-actions"
<GridListActions />