Skip to main content
A responsive grid list component that displays items in a card layout with dropdown menus for item-specific actions. Perfect for displaying collections, categories, or grouped items.

​
Installation

npx shadcn@latest add https://blocks.so/r/grid-list-01.json

​
Dependencies

This component requires the following dependencies:
  • button - shadcn/ui button component
  • card - shadcn/ui card component
  • dropdown-menu - shadcn/ui dropdown menu component
  • lucide-react - Icon library

​
Usage

import GridList01 from "@/components/grid-list-01";

export default function Page() {
  return <GridList01 />;
}

​
Component Code

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MoreVertical } from "lucide-react";

const bookCollections = [
  { name: "Science Fiction", initials: "SF", href: "#", books: 37 },
  { name: "Mystery Thrillers", initials: "MT", href: "#", books: 29 },
  { name: "Historical Fiction", initials: "HF", href: "#", books: 23 },
];

export default function GridList01() {
  return (
    <div className="flex items-center justify-center p-8">
      <div>
        <h2 className="text-balance text-sm font-medium text-muted-foreground">
          Favorite Book Collections
        </h2>
        <ul
          role="list"
          className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-3"
        >
          {bookCollections.map((collection) => (
            <li key={collection.name} className="col-span-1">
              <Card className="flex flex-row w-full gap-0 rounded-md shadow-sm overflow-hidden py-0">
                <div className="flex w-16 shrink-0 items-center justify-center bg-primary text-sm font-medium text-primary-foreground">
                  {collection.initials}
                </div>
                <CardContent className="flex  flex-1 items-center justify-between truncate p-0 bg-card">
                  <div className="flex-1 truncate px-4 py-2 text-sm">
                    <a
                      href={collection.href}
                      className="font-medium text-foreground hover:text-muted-foreground"
                    >
                      {collection.name}
                    </a>
                    <p className="text-pretty text-muted-foreground">
                      {collection.books} Books
                    </p>
                  </div>
                  <div className="shrink-0 pr-2">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 rounded-full"
                        >
                          <span className="sr-only">Open options</span>
                          <MoreVertical className="h-5 w-5" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>View collection</DropdownMenuItem>
                        <DropdownMenuItem>Edit collection</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>Share collection</DropdownMenuItem>
                        <DropdownMenuItem className="text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive">
                          Delete collection
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardContent>
              </Card>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

​
Features

  • Responsive grid layout (1 column on mobile, 3 columns on large screens)
  • Card-based design with color-coded initials
  • Dropdown menu for item actions
  • Accessible with proper ARIA labels
  • Hover states and focus management
  • Destructive action styling for delete operations

​
Customization

You can customize this component by:
  • Modifying the bookCollections array with your own data
  • Adjusting grid columns with Tailwind’s grid-cols-* classes
  • Changing the color scheme of the initials section
  • Adding or removing dropdown menu items
  • Implementing actual handler functions for menu actions

Build docs developers (and LLMs) love

Get started for freeTalk to us