Docs
Accordion
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@repo/tailwindcss/default/accordion";
const AccordionDemo = () => {
return (
<Accordion collapsible class="w-full">
<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 matches the other components'
aesthetic.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It's animated by default, but you can disable it if you prefer.
</AccordionContent>
</AccordionItem>
</Accordion>
);
};
export default AccordionDemo;import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@repo/tailwindcss/solid/accordion";
const AccordionDemo = () => {
return (
<Accordion collapsible class="w-full">
<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 matches the other components'
aesthetic.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it animated?</AccordionTrigger>
<AccordionContent>
Yes. It's animated by default, but you can disable it if you prefer.
</AccordionContent>
</AccordionItem>
</Accordion>
);
};
export default AccordionDemo;Installation
npx shadcn-solid@latest add accordionInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Update config:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--kb-accordion-content-height)" }
},
"accordion-up": {
from: { height: "var(--kb-accordion-content-height)" },
to: { height: 0 }
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out"
}
}
}
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Update config:
export default defineConfig({
themes: {
animation: {
keyframes: {
"accordion-down":
"{ from { height: 0 } to { height: var(--kb-accordion-content-height) } }",
"accordion-up": "{ from { height: var(--kb-accordion-content-height) } to { height: 0 } }"
},
timingFns: {
"accordion-down": "ease-out",
"accordion-up": "ease-out"
},
durations: {
"accordion-down": "0.2s",
"accordion-up": "0.2s"
}
}
}
});Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger
} from "@/components/ui/accordion"<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>
</Accordion>