A vertical list of package groups with version badges and collapsible rows that expand to reveal the individual dependencies inside each group.
"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>
);
}
Part of Cnippet — browse the full library on 21st.dev.