Accordion

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.

Installation

pnpm dlx shadcn@latest add @cortexcn/accordion

pnpm dlx shadcn@latest add @cortexcn/accordion

The open and close animations use animate-accordion-down and animate-accordion-up from tw-animate-css, which shadcn init adds to your project.

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/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>

Examples

Basic

A basic accordion that shows one item at a time. The first item is 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.

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

const items = [
  {
    value: "item-1",
    trigger: "How do I reset my password?",
    content:
      "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.",
  },
  {
    value: "item-2",
    trigger: "Can I change my subscription plan?",
    content:
      "Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.",
  },
  {
    value: "item-3",
    trigger: "What payment methods do you accept?",
    content:
      "We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.",
  },
];

export function AccordionBasic() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="max-w-lg"
    >
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.trigger}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/accordion";const items = [  {    value: "item-1",    trigger: "How do I reset my password?",    content:      "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.",  },  {    value: "item-2",    trigger: "Can I change my subscription plan?",    content:      "Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.",  },  {    value: "item-3",    trigger: "What payment methods do you accept?",    content:      "We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.",  },];export function AccordionBasic() {  return (    <Accordion      type="single"      collapsible      defaultValue="item-1"      className="max-w-lg"    >      {items.map((item) => (        <AccordionItem key={item.value} value={item.value}>          <AccordionTrigger>{item.trigger}</AccordionTrigger>          <AccordionContent>{item.content}</AccordionContent>        </AccordionItem>      ))}    </Accordion>  );}

Multiple

Use type="multiple" to allow multiple items to be open at the same time.

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

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

const items = [
  {
    value: "notifications",
    trigger: "Notification Settings",
    content:
      "Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.",
  },
  {
    value: "privacy",
    trigger: "Privacy & Security",
    content:
      "Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.",
  },
  {
    value: "billing",
    trigger: "Billing & Subscription",
    content:
      "View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.",
  },
];

export function AccordionMultiple() {
  return (
    <Accordion
      type="multiple"
      className="max-w-lg"
      defaultValue={["notifications"]}
    >
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.trigger}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/accordion";const items = [  {    value: "notifications",    trigger: "Notification Settings",    content:      "Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.",  },  {    value: "privacy",    trigger: "Privacy & Security",    content:      "Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.",  },  {    value: "billing",    trigger: "Billing & Subscription",    content:      "View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.",  },];export function AccordionMultiple() {  return (    <Accordion      type="multiple"      className="max-w-lg"      defaultValue={["notifications"]}    >      {items.map((item) => (        <AccordionItem key={item.value} value={item.value}>          <AccordionTrigger>{item.trigger}</AccordionTrigger>          <AccordionContent>{item.content}</AccordionContent>        </AccordionItem>      ))}    </Accordion>  );}

Disabled

Use the disabled prop on AccordionItem to disable individual items.

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

const items = [
  {
    value: "account",
    trigger: "Account details",
    content:
      "Update your name, email address, and profile photo from the account page.",
  },
  {
    value: "team",
    trigger: "Team seats (available on the Team plan)",
    content: "Invite teammates and manage their roles.",
    disabled: true,
  },
  {
    value: "export",
    trigger: "Export your data",
    content:
      "Download a copy of your projects and settings as a ZIP file at any time.",
  },
];

export function AccordionDisabled() {
  return (
    <Accordion type="single" collapsible className="max-w-lg">
      {items.map((item) => (
        <AccordionItem
          key={item.value}
          value={item.value}
          disabled={item.disabled}
        >
          <AccordionTrigger>{item.trigger}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/accordion";const items = [  {    value: "account",    trigger: "Account details",    content:      "Update your name, email address, and profile photo from the account page.",  },  {    value: "team",    trigger: "Team seats (available on the Team plan)",    content: "Invite teammates and manage their roles.",    disabled: true,  },  {    value: "export",    trigger: "Export your data",    content:      "Download a copy of your projects and settings as a ZIP file at any time.",  },];export function AccordionDisabled() {  return (    <Accordion type="single" collapsible className="max-w-lg">      {items.map((item) => (        <AccordionItem          key={item.value}          value={item.value}          disabled={item.disabled}        >          <AccordionTrigger>{item.trigger}</AccordionTrigger>          <AccordionContent>{item.content}</AccordionContent>        </AccordionItem>      ))}    </Accordion>  );}

Card

Wrap the accordion in a Card.

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.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/accordion";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/card";

const items = [
  {
    value: "plans",
    trigger: "What subscription plans do you offer?",
    content:
      "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.",
  },
  {
    value: "billing",
    trigger: "How does billing work?",
    content:
      "Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.",
  },
  {
    value: "cancel",
    trigger: "How do I cancel my subscription?",
    content:
      "You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.",
  },
];

export function AccordionCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Subscription & Billing</CardTitle>
        <CardDescription>
          Common questions about your account, plans, payments and
          cancellations.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible defaultValue="plans">
          {items.map((item) => (
            <AccordionItem key={item.value} value={item.value}>
              <AccordionTrigger>{item.trigger}</AccordionTrigger>
              <AccordionContent>{item.content}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </CardContent>
    </Card>
  );
}

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/accordion";import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/card";const items = [  {    value: "plans",    trigger: "What subscription plans do you offer?",    content:      "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.",  },  {    value: "billing",    trigger: "How does billing work?",    content:      "Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.",  },  {    value: "cancel",    trigger: "How do I cancel my subscription?",    content:      "You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.",  },];export function AccordionCard() {  return (    <Card className="w-full max-w-sm">      <CardHeader>        <CardTitle>Subscription & Billing</CardTitle>        <CardDescription>          Common questions about your account, plans, payments and          cancellations.        </CardDescription>      </CardHeader>      <CardContent>        <Accordion type="single" collapsible defaultValue="plans">          {items.map((item) => (            <AccordionItem key={item.value} value={item.value}>              <AccordionTrigger>{item.trigger}</AccordionTrigger>              <AccordionContent>{item.content}</AccordionContent>            </AccordionItem>          ))}        </Accordion>      </CardContent>    </Card>  );}

API Reference

The accordion is built on the Radix UI Accordion, so every Radix prop works.

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	required	Whether one or several items can be open at a time
`collapsible`	`boolean`	`false`	With `type="single"`, lets the open item close
`defaultValue`	`string \| string[]`	-	Items open on first render
`value`	`string \| string[]`	-	Controlled open items
`onValueChange`	`(value) => void`	-	Called when the open items change
`disabled`	`boolean`	`false`	Disables every item
`className`	`string`	-	Extra classes for the root

AccordionItem

Prop	Type	Default	Description
`value`	`string`	required	Unique value for the item
`disabled`	`boolean`	`false`	Stops the item from toggling
`className`	`string`	-	Extra classes for the item

AccordionTrigger

Prop	Type	Default	Description
`className`	`string`	-	Extra classes for the heading

AccordionContent

Prop	Type	Default	Description
`className`	`string`	-	Extra classes for the content panel

Adapted from the shadcn/ui Accordion (MIT).