Command Palette

Search for a command to run...

Docs
Plus/Minus Accordion

Plus/Minus Accordion

An accordion with plus/minus toggle icons for expand and collapse states.

Installation

Usage

import AccordionPlus from "@/components/ruixen/accordion-plus";
 
const items = [
  {
    id: "1",
    title: "What's included in the free plan?",
    content: "The free plan includes up to 3 projects and 1GB storage.",
  },
  {
    id: "2",
    title: "Can I upgrade later?",
    content: "Yes, you can upgrade to a paid plan at any time.",
  },
];
 
export default function MyAccordion() {
  return <AccordionPlus items={items} defaultValue="1" />;
}

Props

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