# V accordion 8

> Nested accordion example with bordered items

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

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-accordion-8
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-accordion-8-light-c6306e3f5c373fb7.png
- Registry item: https://ui.cnippet.dev/r/v-accordion-8.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-8.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-8.tsx`

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

const nestedItems = [
  {
    content:
      "Detailed technical specs including dimensions, weight, and power requirements.",
    trigger: "Technical Specifications",
    value: "sub-item-1",
  },
  {
    content:
      "List of supported devices and operating systems for this product.",
    trigger: "Compatibility",
    value: "sub-item-2",
  },
];

const mainItems = [
  {
    content:
      "This product is designed for high-performance enterprise environments requiring maximum reliability.",
    trigger: "Product Overview",
    value: "product-info",
  },
  {
    isNested: true,
    trigger: "Additional Details",
    value: "details",
  },
  {
    content:
      "Free standard shipping on orders over $500. 30-day return policy applies.",
    trigger: "Shipping & Returns",
    value: "shipping",
  },
];

export function Pattern() {
  return (
    <div className="mx-auto mb-auto w-full max-w-lg">
      <Accordion
        className="space-y-2 border-none"
        defaultValue={["details"]}
        multiple={false}
      >
        {mainItems.map((item) => (
          <AccordionItem
            className="rounded-lg border border-border bg-transparent px-4"
            key={item.value}
            value={item.value}
          >
            <AccordionTrigger className="items-center py-3 font-medium hover:no-underline">
              {item.trigger}
            </AccordionTrigger>
            <AccordionContent className="h-auto text-muted-foreground">
              {item.isNested ? (
                <Accordion
                  className="space-y-2 border-none"
                  defaultValue={["sub-item-1"]}
                  multiple={false}
                >
                  {nestedItems.map((subItem) => (
                    <AccordionItem
                      className="rounded-lg border border-border bg-transparent px-3"
                      key={subItem.value}
                      value={subItem.value}
                    >
                      <AccordionTrigger className="items-center py-3 font-medium text-foreground hover:no-underline">
                        {subItem.trigger}
                      </AccordionTrigger>
                      <AccordionContent className="text-sm">
                        {subItem.content}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              ) : (
                item.content
              )}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}
```