Preview

Installation

<> import.ts
import { Accordion } from "@/components/ui/accordion"

Code

<> component.tsx
import { Accordion } from "@/components/ui/accordion"

<Accordion />

API Reference

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

<> import.ts
import { Accordion, AccordionPresets, AccordionIcons } from "@/components/ui/accordion"

Props

PropTypeDefaultDescription
items
AccordionItem[]—Array of accordion items to display
variant
"default" | "bordered" | "minimal" | "card""default"Visual variant of the accordion
size
"sm" | "md" | "lg""md"Size of the accordion items
allowMultiple
booleanfalseWhether multiple items can be open simultaneously
defaultOpenItems
string[][]Array of item IDs that should be open by default
className
string""Additional CSS classes
onToggle
(itemId: string, isOpen: boolean) => void—Callback function when an item is toggled

Examples

Example 1
<> example.tsx
// Basic accordion
<Accordion
  items={[
    {
      id: 'item-1',
      title: 'What is mokri UI?',
      content: 'mokri UI is a collection of reusable components...'
    },
    {
      id: 'item-2', 
      title: 'How to install?',
      content: 'You can install it via npm...'
    }
  ]}
/>
Example 2
<> example.tsx
// FAQ accordion with preset
<Accordion
  {...AccordionPresets.faq}
  items={faqItems}
/>
Example 3
<> example.tsx
// Accordion with icons
<Accordion
  items={[
    {
      id: 'help',
      title: 'Help Center',
      content: 'Find answers to common questions',
      icon: <AccordionIcons.Question />
    }
  ]}
/>

Presets

faq

FAQ style with bordered variant and multiple open items

navigation

Navigation style with minimal variant and small size

card

Card style with card variant and single open item

simple

Simple default style with single open item