# V accordion 15

> Product specifications table by category

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-accordion-15).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-accordion-15
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-accordion-15-light-600aab8da803ba15.png
- Registry item: https://ui.cnippet.dev/r/v-accordion-15.json
- Categories: accordion
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-15.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/accordion`

## Files

### `registry/default/variants/v-accordion-15.tsx`

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/default/ui/accordion";
import { Badge } from "@/registry/default/ui/badge";

const specs = [
  {
    category: "Display",
    rows: [
      ["Screen Size", "14.2-inch Liquid Retina XDR"],
      ["Resolution", "3024 × 1964 at 254 ppi"],
      ["Brightness", "1000 nits sustained (full-screen)"],
      ["Refresh Rate", "ProMotion adaptive 24Hz to 120Hz"],
    ],
    value: "display",
  },
  {
    category: "Performance",
    rows: [
      ["Chip", "Apple M4 Pro"],
      ["CPU Cores", "14-core (10 performance, 4 efficiency)"],
      ["GPU Cores", "20-core"],
      ["Memory", "24 GB unified memory"],
      ["Storage", "512 GB SSD"],
    ],
    value: "performance",
  },
  {
    category: "Battery & Power",
    rows: [
      ["Battery Life", "Up to 22 hours video playback"],
      ["Battery Capacity", "72.4-watt-hour lithium-polymer"],
      ["Fast Charge", "0–50% in ~30 min with 96W+ adapter"],
      ["Charger", "96W USB-C Power Adapter (included)"],
    ],
    value: "battery",
  },
  {
    category: "Connectivity",
    rows: [
      ["Wi-Fi", "Wi-Fi 6E (802.11ax)"],
      ["Bluetooth", "5.3"],
      ["Ports", "3× Thunderbolt 4, HDMI, SD card, MagSafe 3"],
    ],
    value: "connectivity",
  },
];

export function Pattern() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <div className="mb-4 flex items-center gap-2">
        <h2 className="font-semibold text-base">Technical Specifications</h2>
        <Badge size="sm" variant="secondary">
          MacBook Pro 14&Prime;
        </Badge>
      </div>
      <Accordion className="w-full" defaultValue={["display"]} multiple>
        {specs.map((spec) => (
          <AccordionItem key={spec.value} value={spec.value}>
            <AccordionTrigger className="font-medium">
              {spec.category}
            </AccordionTrigger>
            <AccordionContent>
              <dl className="divide-y text-sm">
                {spec.rows.map(([label, value]) => (
                  <div className="flex items-baseline gap-4 py-2.5" key={label}>
                    <dt className="w-36 shrink-0 text-muted-foreground">
                      {label}
                    </dt>
                    <dd className="text-foreground">{value}</dd>
                  </div>
                ))}
              </dl>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}
```