Command Palette

Search for a command to run...

Docs
Bordered Accordion

Bordered Accordion

An accordion with bordered card-style items and highlighted open state backgrounds.

Installation

Usage

import AccordionBordered from "@/components/ruixen/accordion-bordered";
 
const items = [
  {
    id: "1",
    title: "What payment methods do you accept?",
    content: "We accept all major credit cards, PayPal, and Apple Pay.",
  },
  {
    id: "2",
    title: "Can I change my order?",
    content: "You can modify your order within 1 hour of placing it.",
  },
];
 
export default function MyAccordion() {
  return <AccordionBordered items={items} defaultValue="1" />;
}

Props

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