Accordion
Accordion is a higher-level helper around Accordion primitives. You can pass items for a data-driven setup or render custom children manually.
Installation
1. Install the Accordion primitive via shadcn:
npx shadcn@latest add accordion2. Copy the wrapper source:
- Source:
packages/ui/src/common/overlays/accordion-wrapper.tsx - Place in your project:
components/common/overlays/accordion-wrapper.tsx - Required components:
components/ui/accordion.tsx,lib/utils.ts
3. Update import paths to match your project structure.
Usage
import { AccordionWrapper as Accordion } from "@hoag/ui/accordion-wrapper";
const faqItems = [
{
value: "item-1",
trigger: "What is @hoag/ui?",
content: "A component library built with shadcn conventions and Radix primitives.",
},
{
value: "item-2",
trigger: "Can I customize styles?",
content: "Yes. Components are Tailwind-first and easy to extend.",
},
];
export default function Demo() {
return <Accordion type="single" collapsible items={faqItems} />;
}Default
<Accordion type="single" collapsible items={faqItems} />Multiple Open Items
<Accordion type="multiple" items={items} />API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionWrapperItem[] | — | Data source for auto-rendered accordion items |
type | "single" | "multiple" | "single" | Whether one or many items can be open |
collapsible | boolean | false | Allow closing opened item in single mode |
itemClassName | string | — | Global class for each item |
triggerClassName | string | — | Global class for each trigger |
contentClassName | string | — | Global class for each content |
children | ReactNode | — | Custom rendered accordion items |
AccordionWrapperItem
| Field | Type | Description |
|---|---|---|
value | string | Unique item value |
trigger | ReactNode | Trigger content |
content | ReactNode | Expanded content |
itemClassName | string | Per-item class override |
triggerClassName | string | Per-trigger class override |
contentClassName | string | Per-content class override |