Kipui

Accordion

Disclosure list in single or multiple mode, with five framings from bordered to ghost.

Source
1 file
Dependencies
none
Playground
no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01

Single

Yes — every color comes from the semantic oklch tokens, so all five palettes and dark mode work automatically.

<Accordion type="single" collapsible />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "kipui";
Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

accordion-example.tsx
import {
  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
} from "kipui";

<Accordion type="single" variant="separated" defaultValue="a">
  <AccordionItem value="a">
    <AccordionTrigger>Is it a package or code I copy?</AccordionTrigger>
    <AccordionContent>Code you copy.</AccordionContent>
  </AccordionItem>
</Accordion>
  • `type="single"` with `collapsible` lets the open item be closed again; without it one is always open.
  • `defaultValue` takes an array in `multiple` mode.

API reference

Transcribed from the component's own types. Props with no default are required.

Accordion

PropDefaultDescription
type"single" | "multiple""single"How many items can be open.
collapsiblebooleanfalseSingle mode only — lets the open item close.
defaultValuestring | string[]requiredInitially open item, or items in multiple mode.
variant"default" | "bordered" | "separated" | "divided" | "ghost""default"Framing of the list.

AccordionItem

PropDefaultDescription
valuestringrequiredRequired. Identifies the item.
disabledbooleanfalseCannot be opened.