Accordion

Component 6

About

An animated accordion for FAQs, settings groups and nested content, with single or multiple open items and several visual variants. Accessible, built on Base UI.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accordion to your project and fits it to your theme.

Code

How Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

const faqItems = [
  {
    value: "item-1",
    question: "What is included in the free plan?",
    answer:
      "The free plan includes every primitive in the library, unlimited projects, and community support. Premium components and templates require a paid plan.",
  },
  {
    value: "item-2",
    question: "Can I use this in commercial projects?",
    answer:
      "Yes. Every primitive is MIT licensed and safe to ship in commercial products, including client work and SaaS applications.",
  },
  {
    value: "item-3",
    question: "How do updates work?",
    answer:
      "Every purchase includes lifetime updates. New components and fixes land in your account as soon as they ship.",
  },
];

function DemoAccordion({ variant }: { variant: AccordionVariant }) {
  return (
    <Accordion type="single" variant={variant} defaultValue="item-1" className="w-full">
      {faqItems.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionContent>{item.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

export function AccordionPreview() {
  return (
    <div className="w-full max-w-md">
      <DemoAccordion variant="minimal" />
    </div>
  );
}

export default function Demo() {
  return <AccordionPreview />;
}