Installation
npm install @kuzenbo/core
Usage
import { Accordion } from "@kuzenbo/core";
function Example() {
return (
<Accordion defaultValue={["item-1"]}>
<Accordion.Item value="item-1">
<Accordion.Header>
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
Yes. It adheres to the WAI-ARIA design pattern.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Header>
<Accordion.Trigger>Is it styled?</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
Yes. It comes with default styles that you can customize.
</Accordion.Content>
</Accordion.Item>
</Accordion>
);
}
Variants
Default
<Accordion variant="default" />
Bordered
<Accordion variant="bordered" />
Ghost
<Accordion variant="ghost" />
Props
Accordion
variant
'default' | 'bordered' | 'ghost'
default:"'default'"
The visual style variant of the accordion.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The size of the accordion and its children.
The default open items (uncontrolled mode).
The controlled open items.
onValueChange
(value: string[]) => void
Callback fired when the open items change.
Enable browser find-in-page to reveal collapsed content.
Accordion.Item
A unique value for this accordion item.
Whether the item is disabled.
Accordion.Trigger
Additional CSS classes to apply.
Accordion.Content
Keep content mounted in the DOM when collapsed.
Additional CSS classes to apply.
Advanced Patterns
Single Item Mode
<Accordion defaultValue={["item-1"]}>
{/* Only one item can be open at a time */}
</Accordion>
Controlled State
const [openItems, setOpenItems] = useState(["item-1"]);
<Accordion value={openItems} onValueChange={setOpenItems}>
{/* ... */}
</Accordion>
Keep Content Mounted
<Accordion.Content keepMounted>
{/* Content stays in DOM when collapsed */}
</Accordion.Content>