Collapsible

Kumo is Cloudflare's new design system.

<Collapsible label="What is Kumo?">
  Kumo is Cloudflare's new design system.
</Collapsible>

Installation

Barrel

import { Collapsible } from "@cloudflare/kumo";

Granular

import { Collapsible } from "@cloudflare/kumo/components/collapsible";

Usage

import { Collapsible } from "@cloudflare/kumo";

export default function Example() {
  return (
    <Collapsible label="Question">
      Answer content goes here.
    </Collapsible>
  );
}

Examples

Single Item

<Collapsible label="What is Kumo?">
  Kumo is Cloudflare's new design system.
</Collapsible>

Multiple Items

<div className="space-y-2">
  <Collapsible label="What is Kumo?">
    Kumo is Cloudflare's new design system.
  </Collapsible>
  <Collapsible label="How do I use it?">
    Install the components and import them into your project.
  </Collapsible>
  <Collapsible label="Is it open source?">
    Check the repository for license information.
  </Collapsible>
</div>

API Reference

Prop	Type	Default	Description
children	`ReactNode`	-	-
label*	`string`	-	Text label displayed in the trigger button
open	`boolean`	-	Whether the collapsible content is visible
className	`string`	-	Additional CSS classes for the content panel
onOpenChange	`(open: boolean) => void`	-	Callback when collapsed state changes