Accordion

A set of collapsible panels for FAQs and progressive disclosure. Accessible by default. Base UI handles aria-expanded, heading semantics and keyboard navigation.

Default

Yes. We ship to 140 countries as long as your customs form doesn't say "definitely not a rocket".

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

export default function Example() {
  return (
    <div className="flex w-full justify-center">
      <Accordion defaultValue={["shipping"]} className="w-full max-w-13">
        <AccordionItem value="shipping">
          <AccordionTrigger>Do you ship internationally?</AccordionTrigger>
          <AccordionContent>
            Yes. We ship to 140 countries as long as your customs form doesn't
            say "definitely not a rocket".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="returns">
          <AccordionTrigger>What's your return policy?</AccordionTrigger>
          <AccordionContent>
            30 days, no questions asked. Slightly burnt rocket fuel residue is
            still considered "like new".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="warranty">
          <AccordionTrigger>Is there a warranty?</AccordionTrigger>
          <AccordionContent>
            Lifetime coverage against spontaneous combustion. Atmospheric
            re-entry scratches not included.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="support">
          <AccordionTrigger>How do I reach support?</AccordionTrigger>
          <AccordionContent>
            Ping us anytime. Response times range from "instant" to "after we
            land" depending on orbital position.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

Multiple

Yes. We ship to 140 countries as long as your customs form doesn't say "definitely not a rocket".

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

export default function Example() {
  return (
    <div className="flex w-full justify-center">
      <Accordion multiple defaultValue={["shipping"]} className="w-full max-w-13">
        <AccordionItem value="shipping">
          <AccordionTrigger>Do you ship internationally?</AccordionTrigger>
          <AccordionContent>
            Yes. We ship to 140 countries as long as your customs form doesn't
            say "definitely not a rocket".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="returns">
          <AccordionTrigger>What's your return policy?</AccordionTrigger>
          <AccordionContent>
            30 days, no questions asked. Slightly burnt rocket fuel residue is
            still considered "like new".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="warranty">
          <AccordionTrigger>Is there a warranty?</AccordionTrigger>
          <AccordionContent>
            Lifetime coverage against spontaneous combustion. Atmospheric
            re-entry scratches not included.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="support">
          <AccordionTrigger>How do I reach support?</AccordionTrigger>
          <AccordionContent>
            Ping us anytime. Response times range from "instant" to "after we
            land" depending on orbital position.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

Disabled

Yes. We ship to 140 countries as long as your customs form doesn't say "definitely not a rocket".

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

export default function Example() {
  return (
    <div className="flex w-full justify-center">
      <Accordion defaultValue={["shipping"]} className="w-full max-w-13">
        <AccordionItem value="shipping">
          <AccordionTrigger>Do you ship internationally?</AccordionTrigger>
          <AccordionContent>
            Yes. We ship to 140 countries as long as your customs form doesn't
            say "definitely not a rocket".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="classified" disabled>
          <AccordionTrigger>Where is the secret launch pad?</AccordionTrigger>
          <AccordionContent>
            Nice try. This one's classified until you clear the background check.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="support">
          <AccordionTrigger>How do I reach support?</AccordionTrigger>
          <AccordionContent>
            Ping us anytime. Response times range from "instant" to "after we
            land" depending on orbital position.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

Borderless

Yes. We ship to 140 countries as long as your customs form doesn't say "definitely not a rocket".

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

export default function Example() {
  return (
    <div className="flex w-full justify-center">
      <Accordion bordered={false} defaultValue={["shipping"]} className="w-full max-w-13">
        <AccordionItem value="shipping">
          <AccordionTrigger>Do you ship internationally?</AccordionTrigger>
          <AccordionContent>
            Yes. We ship to 140 countries as long as your customs form doesn't
            say "definitely not a rocket".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="returns">
          <AccordionTrigger>What's your return policy?</AccordionTrigger>
          <AccordionContent>
            30 days, no questions asked. Slightly burnt rocket fuel residue is
            still considered "like new".
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="warranty">
          <AccordionTrigger>Is there a warranty?</AccordionTrigger>
          <AccordionContent>
            Lifetime coverage against spontaneous combustion. Atmospheric
            re-entry scratches not included.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="support">
          <AccordionTrigger>How do I reach support?</AccordionTrigger>
          <AccordionContent>
            Ping us anytime. Response times range from "instant" to "after we
            land" depending on orbital position.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

Props

Accordion

Prop	Type	Default
bordered	boolean	true
multiple	boolean	false
value	string[]	—
defaultValue	string[]	—
onValueChange	(value: string[], eventDetails) => void	—
disabled	boolean	false

AccordionItem

Prop	Type	Default
value	string	auto-generated
disabled	boolean	false