Menu

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.

Installation

$ npx uix-ui@latest add accordion

This copies the file into components/ui/accordion.tsx in your project. npx shadcn@latest add @uix/accordion works too.

Usage

accordion.tsx
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.

Props

PropTypeDefaultDescription
appearancedefault | bordered | filled"default"
titleReact.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-authority
  • clsx
  • tailwind-merge
  • lib/utils.ts
  • components/ui/icons.tsx
This file exports 2 parts: Accordion, AccordionItem. Use only the ones you need.
esc

↑↓ to navigate · ↵ to select · esc to close