Command Palette

Search for a command to run...

Docs
Nested Accordion

Nested Accordion

An accordion that supports nested sub-accordions for hierarchical content organization.

Installation

Usage

import AccordionNested from "@/components/ruixen/accordion-nested";
 
const items = [
  {
    id: "1",
    title: "Account Settings",
    content: "Manage your account preferences.",
    subItems: [
      {
        id: "1-1",
        title: "Profile Information",
        content: "Update your name and email.",
      },
      {
        id: "1-2",
        title: "Security",
        content: "Change password and enable 2FA.",
      },
    ],
  },
];
 
export default function MyAccordion() {
  return <AccordionNested items={items} defaultValue="1" />;
}

Props

PropTypeDefaultDescription
itemsAccordionNestedItem[]-Array of accordion items
defaultValuestring-ID of the initially open item
classNamestring-Additional CSS classes