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.

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>
  );
}

About this block

Shipping and Returns Accordion opens with a centered heading and a one-line subheading, then stacks three bordered cards in a single column. Each card has a tinted icon, a title, and a short descriptor visible at all times. Tapping a card expands it to reveal the full content: Shipping Details shows a two-column grid of standard and express options; Estimated Delivery walks through a three-step numbered sequence of Processing, In Transit, and Delivered; Return Policy splits returnable and non-returnable items side by side, then adds a three-step return process grid and a highlighted free returns notice. Only one card can be open at a time.

All copy, item counts, and the inner layouts of each panel are independent. You can add or remove accordion items, rewrite every tier label and price, or cut a panel entirely without affecting the others. The heading block at the top is also a standalone swap.

When to use

Reach for this block on a product detail page or a dedicated policy page where you want the full detail available but not visible by default. It suits a developer tools company selling physical hardware, swag, or boxed software where purchasers need precise delivery windows and clear return conditions before they commit. Compared to the Split Columns layout, the accordion trades side-by-side scanning for depth per section, which helps when each topic needs several sub-items.

A natural flow around it on an Ecommerce page:

Before

A Product Overview to anchor the item context before policy details appear
A Trust Guarantee section to reinforce credibility right above the policy

After

A Customer Reviews block to close the page with social proof
A Cross Sells row if you want to surface related items below the policy

What you can customize

The three accordion panels each carry distinct inner structures you can adapt to your own policy details:

Shipping tiers. The Shipping Details panel uses a two-column list grid, so you can replace the standard and express tiers with any set of delivery options and pricing relevant to your catalog.
Delivery timeline. The Estimated Delivery panel renders a numbered three-step sequence; swap the labels and descriptions to reflect your actual processing and transit windows.
Return rules. The Return Policy panel splits returnable and non-returnable items into two lists and appends a step-by-step return process; update both lists and the refund timeframe to match your policy.

Tip: keep each expanded panel to two or three distinct sections so the page does not scroll excessively when a card is open.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

A Product Overview to anchor the item context before policy details appear
A Trust Guarantee section to reinforce credibility right above the policy

After

A Customer Reviews block to close the page with social proof
A Cross Sells row if you want to surface related items below the policy

What you can customize

The three accordion panels each carry distinct inner structures you can adapt to your own policy details:

Shipping tiers. The Shipping Details panel uses a two-column list grid, so you can replace the standard and express tiers with any set of delivery options and pricing relevant to your catalog.
Delivery timeline. The Estimated Delivery panel renders a numbered three-step sequence; swap the labels and descriptions to reflect your actual processing and transit windows.
Return rules. The Return Policy panel splits returnable and non-returnable items into two lists and appends a step-by-step return process; update both lists and the refund timeframe to match your policy.

Tip: keep each expanded panel to two or three distinct sections so the page does not scroll excessively when a card is open.

Accordion

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize