A vertically stacked set of interactive headings that each reveal a section of content.
The Accordion is a copy-paste component in the Layout collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/lightswind/accordion';
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/lightswind/accordion';23export function AccordionDemo() {4 return (5 <Accordion type="single" collapsible className="w-full">6 <AccordionItem value="item-1">7 <AccordionTrigger>Is it accessible?</AccordionTrigger>8 <AccordionContent>9 Yes. It adheres to the WAI-ARIA design pattern.10 </AccordionContent>11 </AccordionItem>12 <AccordionItem value="item-2">13 <AccordionTrigger>Is it styled?</AccordionTrigger>14 <AccordionContent>15 Yes. It comes with default styles that matches the other components' aesthetic.16 </AccordionContent>17 </AccordionItem>18 <AccordionItem value="item-3">19 <AccordionTrigger>Is it animated?</AccordionTrigger>20 <AccordionContent>21 Yes. It's animated by default, but you can disable it if you prefer.22 </AccordionContent>23 </AccordionItem>24 </Accordion>25 );26}
A product byＭＵＨＩＬＡＮ and Team❤️.
