Command Palette

Search for a command to run...

Docs
Icon Accordion

Icon Accordion

An accordion with leading icons for each item, perfect for categorized content.

Installation

Usage

import AccordionIcon from "@/components/ruixen/accordion-icon";
import { Shield, CreditCard, Truck } from "lucide-react";
 
const items = [
  {
    id: "1",
    icon: Shield,
    title: "Is my data secure?",
    content: "Yes, we use industry-standard encryption.",
  },
  {
    id: "2",
    icon: CreditCard,
    title: "Are there any hidden fees?",
    content: "No hidden fees. The price you see is the price you pay.",
  },
];
 
export default function MyAccordion() {
  return <AccordionIcon items={items} defaultValue="1" />;
}

Props

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