# Accordion

> An accordion that collapses shipping and returns details into expandable rows. Keeps long policy text tidy on a product page until shoppers tap to read.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-shipping-returns-accordion).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-shipping-returns-accordion
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/ecommerce-ecommerce-shipping-returns-accordion-light-51bc3be54e534596.png
- Registry item: https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-shipping-returns-accordion.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-shipping-returns-accordion.json
```

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

## Dependencies

- npm packages: `lucide-react`, `radix-ui`

## Files

### `components/blocks/ecommerce/ecommerce-shipping-returns/accordion.tsx`

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

export default function ShippingReturnsAccordion() {
  return (
    <div className="px-4 py-8 md:py-12">
      <div className="mx-auto max-w-3xl">
        <div className="mb-8 text-center">
          <h2 className="text-2xl font-bold tracking-tight md:text-3xl">
            Shipping & Returns
          </h2>
          <p className="text-muted-foreground mt-2">
            Everything you need to know about delivery and returns
          </p>
        </div>

        <Accordion type="single" collapsible className="w-full space-y-4">
          <AccordionItem
            value="shipping-details"
            className="rounded-lg border px-6 py-2"
          >
            <AccordionTrigger className="py-6 text-left hover:no-underline">
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full">
                  <svg
                    className="text-primary h-5 w-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-lg font-semibold">Shipping Details</h3>
                  <p className="text-muted-foreground text-sm">
                    Available shipping methods and costs
                  </p>
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent className="pt-2 pb-6">
              <div className="space-y-6 text-sm">
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-3">
                    <h4 className="font-medium">Standard Shipping</h4>
                    <ul className="text-muted-foreground space-y-2">
                      <li>• Free on orders over $75</li>
                      <li>• $5.99 for orders under $75</li>
                      <li>• 5-7 business days</li>
                      <li>• Tracking included</li>
                    </ul>
                  </div>
                  <div className="space-y-3">
                    <h4 className="font-medium">Express Shipping</h4>
                    <ul className="text-muted-foreground space-y-2">
                      <li>• $12.99 flat rate</li>
                      <li>• 2-3 business days</li>
                      <li>• Priority handling</li>
                      <li>• Signature required</li>
                    </ul>
                  </div>
                </div>
                <div className="bg-muted/50 rounded-lg p-4">
                  <p className="text-sm">
                    <strong>Note:</strong> Shipping times may vary during peak
                    seasons and holidays. International shipping available to
                    select countries with additional fees and customs duties.
                  </p>
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>

          <AccordionItem
            value="estimated-delivery"
            className="rounded-lg border px-6 py-2"
          >
            <AccordionTrigger className="py-6 text-left hover:no-underline">
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full">
                  <svg
                    className="text-primary h-5 w-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-lg font-semibold">Estimated Delivery</h3>
                  <p className="text-muted-foreground text-sm">
                    When to expect your order
                  </p>
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent className="pt-2 pb-6">
              <div className="space-y-6 text-sm">
                <div className="grid gap-6 md:grid-cols-3">
                  <div className="text-center">
                    <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 text-green-600">
                      <span className="font-bold">1</span>
                    </div>
                    <h4 className="mb-2 font-medium">Processing</h4>
                    <p className="text-muted-foreground">
                      1-2 business days for order verification and preparation
                    </p>
                  </div>
                  <div className="text-center">
                    <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-blue-600">
                      <span className="font-bold">2</span>
                    </div>
                    <h4 className="mb-2 font-medium">In Transit</h4>
                    <p className="text-muted-foreground">
                      3-5 days standard, 1-2 days express shipping
                    </p>
                  </div>
                  <div className="text-center">
                    <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-purple-100 text-purple-600">
                      <span className="font-bold">3</span>
                    </div>
                    <h4 className="mb-2 font-medium">Delivered</h4>
                    <p className="text-muted-foreground">
                      Tracking confirmation and delivery notification
                    </p>
                  </div>
                </div>
                <div className="border-primary bg-primary/5 rounded-lg border-l-4 p-4">
                  <h4 className="mb-2 font-medium">Order Tracking</h4>
                  <p className="text-muted-foreground">
                    You&apos;ll receive a tracking number via email once your
                    order ships. Track your package in real-time through our
                    customer portal or directly with the carrier.
                  </p>
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>

          <AccordionItem
            value="return-policy"
            className="rounded-lg border px-6 py-2 last:border-b"
          >
            <AccordionTrigger className="py-6 text-left hover:no-underline">
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full">
                  <svg
                    className="text-primary h-5 w-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
                    />
                  </svg>
                </div>
                <div>
                  <h3 className="text-lg font-semibold">Return Policy</h3>
                  <p className="text-muted-foreground text-sm">
                    Easy returns and exchanges
                  </p>
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent className="pt-2 pb-6">
              <div className="space-y-6 text-sm">
                <div className="grid gap-6 md:grid-cols-2">
                  <div>
                    <h4 className="mb-3 font-medium text-green-600">
                      ✓ What&apos;s Returnable
                    </h4>
                    <ul className="text-muted-foreground space-y-2">
                      <li>• Items in original condition</li>
                      <li>• Unused products with tags</li>
                      <li>• Original packaging included</li>
                      <li>• Within 30 days of delivery</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="mb-3 font-medium text-red-600">
                      ✗ Non-Returnable Items
                    </h4>
                    <ul className="text-muted-foreground space-y-2">
                      <li>• Personalized or custom items</li>
                      <li>• Perishable goods</li>
                      <li>• Digital downloads</li>
                      <li>• Items marked as final sale</li>
                    </ul>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-medium">Return Process</h4>
                  <div className="grid gap-4 md:grid-cols-3">
                    <div className="bg-muted/30 rounded-lg p-4 text-center">
                      <div className="mb-2 font-medium">1. Request Return</div>
                      <p className="text-muted-foreground text-xs">
                        Contact us or use our online return portal
                      </p>
                    </div>
                    <div className="bg-muted/30 rounded-lg p-4 text-center">
                      <div className="mb-2 font-medium">2. Ship Back</div>
                      <p className="text-muted-foreground text-xs">
                        Use our prepaid return label
                      </p>
                    </div>
                    <div className="bg-muted/30 rounded-lg p-4 text-center">
                      <div className="mb-2 font-medium">3. Get Refund</div>
                      <p className="text-muted-foreground text-xs">
                        Processed within 3-5 business days
                      </p>
                    </div>
                  </div>
                </div>

                <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
                  <h4 className="mb-2 font-medium text-blue-900">
                    Free Returns
                  </h4>
                  <p className="text-sm text-blue-800">
                    We provide free return shipping labels for all domestic
                    returns. International returns may incur shipping fees
                    deducted from your refund.
                  </p>
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </div>
  );
}
```

### `components/ui/accordion.tsx`

```tsx
"use client"

import * as React from "react"
import { Accordion as AccordionPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"

function Accordion({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return (
    <AccordionPrimitive.Root
      data-slot="accordion"
      className={cn("flex w-full flex-col", className)}
      {...props}
    />
  )
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("not-last:border-b", className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
          className
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
      {...props}
    >
      <div
        className={cn(
          "pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
          className
        )}
      >
        {children}
      </div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
```