Slot UI
3

Accordion

PreviousNext

Expandable content panels that stack vertically, letting users reveal and hide sections on demand.

Loading...
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from "@/components/ui/accordion";

export default function AccordionDemo() {
  return (
    <Accordion className="max-w-sm w-full">
      <AccordionItem>
        <AccordionTrigger>What types of industries do you specialize in?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          We specialize in working with SaaS, AI, Fintech, Web3, and startups. However, we love to work with any industry that values design and development.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>How soon can you start?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          We can typically start within 1-2 days, depending on our current workload and your project requirements. Get in touch to see our availability.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Do you offer ongoing support?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          Yes! Our retainer plan includes ongoing support for design and development requests, with flexible terms that allow you to pause or cancel anytime.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Installation

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from "@/components/ui/accordion";
<Accordion>
  <AccordionItem>
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>Yes. It adheres to the WAI-ARIA design pattern.</AccordionPanel>
  </AccordionItem>
</Accordion>

Examples

Solid

Loading...
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from "@/components/ui/accordion";

export default function AccordionSolid() {
  return (
    <Accordion variant="solid" className="max-w-sm w-full">
      <AccordionItem>
        <AccordionTrigger>What types of industries do you specialize in?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          We specialize in working with SaaS, AI, Fintech, Web3, and startups. However, we love to work with any industry that values design and development.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>How soon can you start?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          We can typically start within 1-2 days, depending on our current workload and your project requirements. Get in touch to see our availability.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Do you offer ongoing support?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          Yes! Our retainer plan includes ongoing support for design and development requests, with flexible terms that allow you to pause or cancel anytime.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Outline

Loading...
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionPanel,
} from "@/components/ui/accordion";

export default function AccordionOutline() {
  return (
    <Accordion variant="outline" className="max-w-sm w-full">
      <AccordionItem>
        <AccordionTrigger>What types of industries do you specialize in?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          We specialize in working with SaaS, AI, Fintech, Web3, and startups. However, we love to work with any industry that values design and development.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>How soon can you start?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          We can typically start within 1-2 days, depending on our current workload and your project requirements. Get in touch to see our availability.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Do you offer ongoing support?</AccordionTrigger>
        <AccordionPanel className="text-balance">
          Yes! Our retainer plan includes ongoing support for design and development requests, with flexible terms that allow you to pause or cancel anytime.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}