What is Kumo?

Kumo is Cloudflare's new design system.

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

Installation

import { Expandable } from "~/components/expandable/expandable";

Usage

import { Expandable } from "~/components/expandable/expandable";

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

Examples

Single Item

What is Kumo?

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

Multiple Items

What is Kumo?

How do I use it?

Is it open source?

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

API Reference

Prop	Type	Default
title	string	undefined
children	React.ReactNode	undefined