インストール
pnpm add @cloudflare/kumo誰向けか
Kumo は現代の Web アプリインターフェースを組む人向けであり、とくにすでに React を使い、キーボード、フォーカス、ARIA の細部を自分で少なくしたいフロント向けだ。Cloudflare のコンポーネントライブラリであり、Base UI の上に立つ。対応ページは https://base-ui.com/ 説明は、キーボードナビ、フォーカス管理、ARIA 属性を処理し、デザインシステムに沿ってインターフェースを組めると書く。
より近い使い方は:React 案件へ @cloudflare/kumo を入れる準備があり、先に対等依存 react、react-dom、@phosphor-icons/react が入ることを確認し、必要に応じて Button、Input、Dialog とスタイルを入れる。コーディング助手のスラッシュ技能としては合わない。React のない案件にも合わない。
リポジトリは他のパッケージマネージャの等価コマンドを書いていない。よって主経路はそれが出す pnpm だけを歩く。あなたのリポジトリが pnpm を使わないなら、既存の説明はここまでである。このコマンドを未記載のインストーラへ書き換えない。
3分で最初の試みを終える
公式の導入コマンドは:pnpm add @cloudflare/kumo。リポジトリ住所は https://github.com/cloudflare/kumo
この頁だけに従って操作する。対等依存の公式コマンドは:pnpm add react react-dom @phosphor-icons/react。案件にすでに React があるなら、版がもう一層の導入を要するか先に照合する。盲目に重ねて入れない。
前提:本機に pnpm があり、捨てられる、またはもともと React を使うローカルアプリがある。インストール位置はそのアプリの依存であり、グローバルなスキルディレクトリではない。
低リスクな最初の作業:先にページを変えない。案件ディレクトリで npx @cloudflare/kumo ls を実行し、全部のコンポーネントだけを列挙する。成功の合図は端末がコンポーネント名簿を印刷し、ページがまだ直されていないこと。もう一份の説明を見るなら npx @cloudflare/kumo doc Button で Button 文書を読み取り専用で見る。npx @cloudflare/kumo docs は全部の文書を取る。最初はしなくてよい。
名簿を確認したあと、本当に繋ぐなら、本番に出さない試験頁へこれを書く:@cloudflare/kumo から Button、Input、Dialog を入れ、import "@cloudflare/kumo/styles"。書き込む前に diff を見、試験頁と依存一覧だけが動いたことを確認する。説明にテーマ定制やサーバ側レンダリング手順はない。よって最初は「コンポーネントを列挙でき、試験頁が Button 一つを描ける」で止まる。
使用事例
事例一:React アプリへ常用コンポーネントを入れる。先に pnpm add @cloudflare/kumo、対等依存を揃え、それから import { Button, Input, Dialog } from "@cloudflare/kumo" し @cloudflare/kumo/styles を載せる。すでにページ骨格があり、このアクセシブルな一式へ替えたいときに合う。説明はこの三つのコンポーネントだけを例として名指しする。他のコンポーネント名は npx @cloudflare/kumo ls を正とする。推測しない。
事例二:CLI で読み取り専用に文書を調べる。npx @cloudflare/kumo ls は全部を列挙し、npx @cloudflare/kumo doc Button は単一コンポーネントの文書を取り、npx @cloudflare/kumo docs は全部の文書を取る。どの頁を直すかまだ決めておらず、先に API を照合したいときに合う。説明は文書の出力形式もオフラインキャッシュも書いていない。調べれば足り、すぐコードを直す必要はない。コマンドが失敗したら https://github.com/cloudflare/kumo へ戻り照合する。未記載の導入方式へ切り替えない。
使用の境界
導入の境界:公式は pnpm add @cloudflare/kumo と対等依存 react、react-dom、@phosphor-icons/react だけを書く。記載のないインストーラは使わない。実行時の境界:例は React コンポーネントとスタイル入口であり、React なしの使い方は書いていない。能力の境界:キーボードナビ、フォーカス管理、ARIA を処理し、デザインシステムに合うと称する。視覚テーマが Cloudflare 公式サイトの各頁と必ず等しいとは書いていない。CLI の境界:照合できるのは ls、doc Button、docs。基礎ライブラリは Base UI、https://base-ui.com/ を見よ。
ただし説明は Kumo と Base UI の全部のコンポーネントを一対一対応させていない。