Package Dependency List

Component 9

About

A vertical list of package groups with version badges and collapsible rows that expand to reveal the individual dependencies inside each group.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Package Dependency List to your project and fits it to your theme.

Code

How Package Dependency List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  ChevronDownIcon,
  PackageIcon,
  ShieldIcon,
  ZapIcon,
} from "lucide-react";
import { Badge } from "@/components/ui/package-dependency-list-utils/badge";
import {
  Card,
  CardPanel,
} from "@/components/ui/package-dependency-list-utils/card";
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/package-dependency-list-utils/collapsible";

const PACKAGES = [
  {
    description: "Logging, rate limiting, and request tracing utilities.",
    icon: ZapIcon,
    id: "middleware",
    items: ["@cnippet/logger", "@cnippet/rate-limit", "@cnippet/trace"],
    label: "Middleware",
    version: "v1.4.2",
    defaultOpen: true,
  },
  {
    description: "Input sanitization and schema validation.",
    icon: ShieldIcon,
    id: "security",
    items: ["@cnippet/sanitize", "@cnippet/zod-adapter"],
    label: "Security",
    version: "v2.1.0",
    defaultOpen: false,
  },
  {
    description: "UI component bundles and design tokens.",
    icon: PackageIcon,
    id: "ui",
    items: ["@cnippet/ui", "@cnippet/tokens", "@cnippet/icons"],
    label: "UI",
    version: "v3.0.0",
    defaultOpen: false,
  },
];

function Pattern() {
  return (
    <div className="w-full max-w-sm space-y-2">
      <p className="mb-3 font-semibold text-sm">Package dependencies</p>
      {PACKAGES.map((pkg) => {
        const Icon = pkg.icon;
        return (
          <Card className="overflow-hidden p-0" key={pkg.id}>
            <Collapsible defaultOpen={pkg.defaultOpen}>
              <CollapsibleTrigger className="w-full">
                <CardPanel className="py-3">
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex items-center gap-2.5">
                      <Icon className="size-4 text-muted-foreground" />
                      <span className="font-medium text-sm">{pkg.label}</span>
                      <Badge size="sm" variant="secondary">
                        {pkg.version}
                      </Badge>
                    </div>
                    <ChevronDownIcon className="size-3.5 in-data-panel-open:rotate-180 text-muted-foreground transition-transform duration-200" />
                  </div>
                </CardPanel>
              </CollapsibleTrigger>
              <CollapsiblePanel>
                <div className="space-y-1.5 border-t bg-muted/30 px-4 py-3">
                  <p className="mb-2 text-muted-foreground text-xs">
                    {pkg.description}
                  </p>
                  {pkg.items.map((item) => (
                    <div
                      className="font-mono text-foreground text-xs"
                      key={item}
                    >
                      {item}
                    </div>
                  ))}
                </div>
              </CollapsiblePanel>
            </Collapsible>
          </Card>
        );
      })}
    </div>
  );
}

export default function Default() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-8">
      <Pattern />
    </div>
  );
}