Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Accordion with single open at a time

View examples code

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

<Accordion type="single">
  <AccordionItem
    className="border-none data-[state=open]:bg-indigo-600 px-3 md:px-4 rounded-xl data-[state=open]:text-primary-foreground  text-muted-foreground"
    value="1"
  >
    <AccordionTrigger className="font-semibold text-base data-[state=open]:text-white text-foreground text-start">
      <div>How do i get started with your agency?</div>
    </AccordionTrigger>
    <AccordionContent className="text-base leading-7">
      Getting started is easy! Simply reach out to us via our contact page or
      email, and one of our representatives will get in touch with you to
      discuss your project needs.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem
    className="border-none data-[state=open]:bg-indigo-600 px-3 md:px-4 rounded-xl data-[state=open]:text-primary-foreground  text-muted-foreground"
    value="2"
  >
    <AccordionTrigger className="font-semibold text-base data-[state=open]:text-white text-foreground text-start">
      <div>What services does your agency serves?</div>
    </AccordionTrigger>
    <AccordionContent className="text-base leading-7">
      Our agency specializes in a wide range of services including web design,
      digital marketing, branding, and content creation.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Accordion with multiple open

View examples code

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

<Accordion type="single">
  <AccordionItem
    className="border-none data-[state=open]:bg-indigo-600 px-3 md:px-4 rounded-xl data-[state=open]:text-primary-foreground  text-muted-foreground"
    value="1"
  >
    <AccordionTrigger className="font-semibold text-base data-[state=open]:text-white text-foreground text-start">
      <div>How do i get started with your agency?</div>
    </AccordionTrigger>
    <AccordionContent className="text-base leading-7">
      Getting started is easy! Simply reach out to us via our contact page or
      email, and one of our representatives will get in touch with you to
      discuss your project needs.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem
    className="border-none data-[state=open]:bg-indigo-600 px-3 md:px-4 rounded-xl data-[state=open]:text-primary-foreground  text-muted-foreground"
    value="2"
  >
    <AccordionTrigger className="font-semibold text-base data-[state=open]:text-white text-foreground text-start">
      <div>What services does your agency serves?</div>
    </AccordionTrigger>
    <AccordionContent className="text-base leading-7">
      Our agency specializes in a wide range of services including web design,
      digital marketing, branding, and content creation.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Accordion with default open

View examples code

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

<Accordion type="single" defaultValue="1">
  <AccordionItem
    className="border-none data-[state=open]:bg-indigo-600 px-3 md:px-4 rounded-xl data-[state=open]:text-primary-foreground  text-muted-foreground"
    value="1"
  >
    <AccordionTrigger className="font-semibold text-base data-[state=open]:text-white text-foreground text-start">
      <div>How do i get started with your agency?</div>
    </AccordionTrigger>
    <AccordionContent className="text-base leading-7">
      Getting started is easy! Simply reach out to us via our contact page or
      email, and one of our representatives will get in touch with you to
      discuss your project needs.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem
    className="border-none data-[state=open]:bg-indigo-600 px-3 md:px-4 rounded-xl data-[state=open]:text-primary-foreground  text-muted-foreground"
    value="2"
  >
    <AccordionTrigger className="font-semibold text-base data-[state=open]:text-white text-foreground text-start">
      <div>What services does your agency serves?</div>
    </AccordionTrigger>
    <AccordionContent className="text-base leading-7">
      Our agency specializes in a wide range of services including web design,
      digital marketing, branding, and content creation.
    </AccordionContent>
  </AccordionItem>
</Accordion>;