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 |