/>
MDX UI
$ init
Accordion

Accordion

Collapsible sections for showing and hiding content

Installation

npx @ravikumarsurya/mdx-ui add accordion

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/mdx/accordion";
 
<Accordion defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is mdx-ui?</AccordionTrigger>
    <AccordionContent>
      mdx-ui is a collection of MDX components you can add to your project.
    </AccordionContent>
  </AccordionItem>
</Accordion>;

Examples

Single (default)

Only one item open at a time. Clicking an open item closes it.

mdx-ui is a collection of copy-paste MDX components built with Tailwind CSS. Add only what you need.

Multiple open items

Set type="multiple" to allow several items open simultaneously.

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section One</AccordionTrigger>
    <AccordionContent>Content for section one.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section Two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</Accordion>

Non-collapsible

Set collapsible={false} so one item is always open.

<Accordion defaultValue="item-1" collapsible={false}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Always one open</AccordionTrigger>
    <AccordionContent>This section cannot be closed.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Another section</AccordionTrigger>
    <AccordionContent>Clicking here closes the previous one.</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

PropTypeDefaultDescription
type"single" | "multiple""single"Allow one or multiple items open at once
defaultValuestring | string[]-Initially open item(s)
collapsiblebooleantrueWhether the active item can be closed (single mode only)
classNamestring-Additional CSS classes

AccordionItem

PropTypeDefaultDescription
valuestring-Unique identifier for this item (required)
classNamestring-Additional CSS classes

AccordionTrigger

Extends React.ButtonHTMLAttributes<HTMLButtonElement>.

AccordionContent

Extends React.HTMLAttributes<HTMLDivElement>.

PreviousAstro
NextAlert