Accordion

Default (divided)

Content for the first panel.
Content for the second panel.

Card style

We offer a full refund within 30 days of purchase. No questions asked. Simply contact our support team and we'll process your refund promptly.
You can upgrade or downgrade your plan anytime from the account settings page. Changes take effect at the start of your next billing cycle.
Yes. You can cancel from your account settings. You'll keep access until the end of your current billing period.

Filled with Plus/Minus

We offer a full refund within 30 days of purchase. No questions asked. Simply contact our support team and we'll process your refund promptly.
You can upgrade or downgrade your plan anytime from the account settings page. Changes take effect at the start of your next billing cycle.
Yes. You can cancel from your account settings. You'll keep access until the end of your current billing period.

Numbered

We offer a full refund within 30 days of purchase. No questions asked. Simply contact our support team and we'll process your refund promptly.
You can upgrade or downgrade your plan anytime from the account settings page. Changes take effect at the start of your next billing cycle.
Yes. You can cancel from your account settings. You'll keep access until the end of your current billing period.

How to use

Use Accordion (divided), AccordionCard (card), AccordionFilled (plus/minus), or AccordionNumbered (number badges). All use items, openId, and onOpenChange.

1. Import

tsx
import { Accordion, AccordionCard, AccordionFilled, AccordionNumbered } from "@/app/components/ui";
import type { AccordionItem, AccordionCardItem, AccordionFilledItem, AccordionNumberedItem } from "@/app/components/ui";

2. Default accordion

tsx
const items: AccordionItem[] = [
  { id: "a1", title: "Item 1", content: "Content for the first panel." },
  { id: "a2", title: "Item 2", content: "Content for the second panel." },
];

<Accordion
  items={items}
  openId={openId}
  onOpenChange={setOpenId}
/>

3. Card-style accordion

tsx
const items: AccordionCardItem[] = [
  { id: "1", title: "What is your refund policy?", content: "We offer a full refund within 30 days." },
  { id: "2", title: "How do I change my plan?", content: "Go to account settings." },
];

<AccordionCard
  items={items}
  openId={openId}
  onOpenChange={setOpenId}
/>

4. Filled with Plus/Minus

tsx
const items: AccordionFilledItem[] = [
  { id: "1", title: "What is your refund policy?", content: "We offer a full refund within 30 days." },
  { id: "2", title: "How do I change my plan?", content: "Go to account settings." },
];

<AccordionFilled
  items={items}
  openId={openId}
  onOpenChange={setOpenId}
/>

5. Numbered accordion

tsx
const items: AccordionNumberedItem[] = [
  { id: "1", title: "What is your refund policy?", content: "We offer a full refund within 30 days." },
  { id: "2", title: "How do I change my plan?", content: "Go to account settings." },
];

<AccordionNumbered
  items={items}
  openId={openId}
  onOpenChange={setOpenId}
/>