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.
"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 />;
}