Krawma Design System

Collapsible

uistable

Collapsible — extracted 1:1 from WEM-App.

npx shadcn add @krawma/collapsible

npm: radix-ui@^1.6.1

Preview

States
openclosed
Keyboard
EnterSpace

Purpose

A single show/hide region toggled by a trigger — the low-level primitive behind disclosure UI. For multiple coordinated sections use accordion; for overlay content use popover/dropdown-menu.

Anatomy

Collapsible › CollapsibleTrigger + CollapsibleContent. Unstyled by design — you bring the trigger's and content's appearance.

Style

No variants and minimal styling — it's a behavior primitive. Compose your own chevron/animation; content is unmounted when closed.

Behavior & functionality

Controlled (open + onOpenChange) or uncontrolled (defaultOpen).

Accessibility

  • Trigger toggles with Enter/Space and exposes aria-expanded + aria-controls wired to the content. Give the trigger a clear label.

Do / Don't

  • ✅ Use for a one-off "show more/less" toggle.
  • ❌ Don't reimplement accordion from many collapsibles — use accordion for coordinated single/multiple-open behavior.