accordion

Installation

Import Accordion, AccordionItem, AccordionTrigger, and AccordionContent.

pnpm add @kamod-ch/ui

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/kamod-ui/accordion";

Usage

Use type="single" with collapsible for shadcn-style behavior, or type="multiple" with defaultValue as an array.

import { Accordion } from "@/components/kamod-ui/accordion";

<Accordion />

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Basic

Single open section; first item open by default.

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

Multiple

Several panels can stay open; defaultValue is a string array.

Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.

Disabled

Set disabled on AccordionItem to block interaction.

Borders

Border on the root and border-b between items.

We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.

Card

Nest the accordion inside CardContent.

Subscription & Billing

Common questions about your account, plans, payments and cancellations.

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

API Reference

Props overview.

Uncontrolled state; use defaultValue as string (single) or string[] (multiple).

Prop	Type	Default
type	`"single" \| "multiple"`	`"single"`
collapsible	`boolean`	`true`
defaultValue	`string \| string[]`	`-`
class	`string`	`-`

AccordionItem

Prop	Type	Default
value	`string`	`(required)`
disabled	`boolean`	`false`
class	`string`	`-`

AccordionTrigger

Prop	Type	Default
hideIndicator	`boolean`	`false`
indicator	`ComponentChildren`	`-`
class	`string`	`-`

AccordionContent

Height animation; optional forceMount, duration, timingFunction, largeContentThreshold.

Prop	Type	Default
forceMount	`boolean`	`false`
duration	`string`	`"320ms"`
timingFunction	`string`	`cubic-bezier…`
largeContentThreshold	`number`	`560`
class	`string`	`-`

Accessibility Notes

Use Accordion with clear labels, keyboard-friendly interactions and semantic structure.