Expandable content sections.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui";A custom-built component library using React, Tailwind CSS, and CSS variables for theming. All components are built from scratch.
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>
Yes. It comes with default styles that match the other components.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It's animated by default with smooth transitions.
</AccordionContent>
</AccordionItem>
</Accordion>Allow multiple items open at once
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}> <AccordionItem value="item-1"> <AccordionTrigger>Section 1</AccordionTrigger> <AccordionContent>Content for section 1</AccordionContent> </AccordionItem> <AccordionItem value="item-2"> <AccordionTrigger>Section 2</AccordionTrigger> <AccordionContent>Content for section 2</AccordionContent> </AccordionItem> <AccordionItem value="item-3"> <AccordionTrigger>Section 3</AccordionTrigger> <AccordionContent>Content for section 3</AccordionContent> </AccordionItem></Accordion>Common FAQ pattern
<Accordion type="single" collapsible className="w-full"> {faqs.map((faq, index) => ( <AccordionItem key={index} value={`faq-${index}`}> <AccordionTrigger>{faq.question}</AccordionTrigger> <AccordionContent>{faq.answer}</AccordionContent> </AccordionItem> ))}</Accordion>Configure your app with the features you need and download production-ready code.
Start Configuring