Accordion
Expandable section. 2 states × 3 styles.
How long does delivery take?
Inside Dhaka, one to two days. Other districts, three to five.
Can I return opened tea?
Yes, within seven days if you did not like it.
Do you ship abroad?
Not yet. We are working on it.
import { Accordion, AccordionItem } from "@/components/ui/accordion";
export default function Example() {
return (
<Accordion style={{ width: 400, maxWidth: "100%" }}>
<AccordionItem title="How long does delivery take?" open>Inside Dhaka, one to two days. Other districts, three to five.</AccordionItem>
<AccordionItem title="Can I return opened tea?">Yes, within seven days if you did not like it.</AccordionItem>
<AccordionItem title="Do you ship abroad?">Not yet. We are working on it.</AccordionItem>
</Accordion>
);
}
Installation
$ npx uix-ui@latest add accordionThis copies the file into components/ui/accordion.tsx in your project. npx shadcn@latest add @uix/accordion works too.
Usage
import { Accordion, AccordionItem } from "@/components/ui/accordion";
<Accordion style={{ width: 400, maxWidth: "100%" }}>
<AccordionItem title="How long does delivery take?" open>Inside Dhaka, one to two days. Other districts, three to five.</AccordionItem>
<AccordionItem title="Can I return opened tea?">Yes, within seven days if you did not like it.</AccordionItem>
<AccordionItem title="Do you ship abroad?">Not yet. We are working on it.</AccordionItem>
</Accordion>
Examples
Bordered and filled
Bordered
Each item gets its own outline.
Filled
A soft background behind the item.
import { Accordion, AccordionItem } from "@/components/ui/accordion";
export default function Example() {
return (
<div style={{ width: 400, display: "grid", gap: 16 }}>
<Accordion><AccordionItem appearance="bordered" title="Bordered">Each item gets its own outline.</AccordionItem></Accordion>
<Accordion><AccordionItem appearance="filled" title="Filled">A soft background behind the item.</AccordionItem></Accordion>
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | default | bordered | filled | "default" | |
title | React.ReactNode | – |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx
This file exports 2 parts: Accordion, AccordionItem. Use only the ones you need.