Collapsible
A single expand/collapse panel. Height animates via ResizeObserver. Use Accordion when you need multiple items with single-open behaviour.
Basic
Click the trigger to expand and collapse. Height animates smoothly using a ResizeObserver — no fixed max-height hacks.
A zero-dependency React design system built from scratch. Behaviour is non-negotiable — appearance is entirely yours.
FAQ list
Multiple independent collapsibles — unlike Accordion, each expands independently.
No. Every component is written from scratch — no Radix, no Floating UI, no Framer Motion. The only runtime dependency is React itself.
Yes. All interactive components follow WAI-ARIA 1.2 patterns, including focus management, keyboard navigation, and correct ARIA attributes.
That is the entire point. Override the CSS custom properties in your own stylesheet — colours, fonts, radii, spacing, and motion tokens.
Yes. Each component is a separate module and unused components are eliminated by your bundler at build time.
Open by default
Pass defaultOpen for uncontrolled initial state.
Karigiri Kit is MIT licensed. Use it freely in personal, commercial, and open-source projects.
Controlled
Manage open state externally with open and onOpenChange.
This collapsible is driven by external state. Use the buttons above to control it.
Disabled
disabled on the root prevents the trigger from toggling.
You should not be able to open this.