QuackElements
Browse components+
Components/Accordion

Accordion

A vertically stacked set of headings that reveal or hide related content.

Interactive example

We offer standard, express, and next-day delivery. Orders over $100 ship free.

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add accordion

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/quack/accordion"

export function AccordionDemo() {
  return (
    <Accordion defaultValue={["shipping"]}>
      <AccordionItem value="shipping">
        <AccordionTrigger>What are your shipping options?</AccordionTrigger>
        <AccordionContent>
          Standard, express, and next-day delivery are available.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>What is your return policy?</AccordionTrigger>
        <AccordionContent>
          Unused items can be returned within 30 days.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}