Kumo: Zuerst die Komponentendocs lesen, dann Cloudflare UI anbinden

Für wen es geeignet ist

Kumo richtet sich an Menschen, die moderne Web-App-Oberflächen bauen, besonders Frontend-Leute schon auf React, die weniger Tastatur-, Fokus- und ARIA-Details selbst machen wollen. Es ist Cloudflares Komponentenbibliothek, gebaut auf Base UI. Die passende Seite ist https://base-ui.com/ Die Notizen sagen, es übernimmt Tastaturnavigation, Fokusverwaltung und ARIA-Attribute, damit Sie eine Oberfläche nach einem Designsystem zusammensetzen.

Ein engerer Gebrauch: Sie wollen @cloudflare/kumo in ein React-Projekt holen, zuerst bestätigen, dass die Peer-Abhängigkeiten react, react-dom, @phosphor-icons/react installierbar sind, dann bei Bedarf Button, Input, Dialog und Stile einführen. Es passt nicht als Slash-Fähigkeit eines Coding-Assistenten und nicht zu einem Projekt ohne React.

Das Repository schreibt keine gleichwertigen Befehle für andere Paketmanager, daher folgt der Hauptweg nur dem gegebenen pnpm. Nutzt Ihr Repository kein pnpm, enden die vorhandenen Notizen hier; schreiben Sie diesen Befehl nicht in einen nie verzeichneten Installer um.

Ersten Versuch in 3 Minuten abschließen

Der offizielle Installationsbefehl ist: pnpm add @cloudflare/kumo. Die Repository-Adresse ist https://github.com/cloudflare/kumo Arbeiten Sie nur nach dieser Seite. Der offizielle Peer-Abhängigkeitsbefehl ist: pnpm add react react-dom @phosphor-icons/react. Hat das Projekt schon React, zuerst prüfen, ob die Version noch eine weitere Installationsschicht braucht; nicht blind erneut installieren.

Voraussetzung: Dieser Rechner hat pnpm, und Sie haben eine lokale App, die Sie wegwerfen können oder die schon React nutzt. Der Installationsort sind die Abhängigkeiten jener App, kein globales Skill-Verzeichnis.

Risikoarme erste Aufgabe: zuerst keine Seite ändern. Im Projektverzeichnis npx @cloudflare/kumo ls ausführen und nur alle Komponenten auflisten. Erfolgssignal: das Terminal druckt eine Komponentenliste, Ihre Seite wurde nicht geändert. Für eine weitere Notiz npx @cloudflare/kumo doc Button nutzen und Button-Docs nur lesend ansehen; npx @cloudflare/kumo docs holt alle Docs und kann beim ersten Mal entfallen.

Nach Bestätigung der Liste, wenn Sie wirklich anbinden, diesen Block auf eine nicht live gehende Versuchsseite schreiben: Button, Input, Dialog aus @cloudflare/kumo einführen und import "@cloudflare/kumo/styles". Vor dem Schreiben das Diff ansehen und bestätigen, dass nur Versuchsseite und Abhängigkeitsliste bewegt wurden. Die Notizen schreiben keine Theme-Anpassung und keine Server-Render-Schritte, daher beim ersten Mal bei „Komponenten auflisten können, Versuchsseite kann einen Button rendern“ bleiben.

Anwendungsfälle

Fall 1: Gängige Komponenten in eine React-App holen. Zuerst pnpm add @cloudflare/kumo, Peer-Abhängigkeiten ergänzen, dann import { Button, Input, Dialog } from "@cloudflare/kumo" und @cloudflare/kumo/styles laden. Passt, wenn Sie schon ein Seitengerüst haben und nur auf dieses barrierefreie Set wechseln wollen. Die Notizen nennen nur diese drei Komponenten als Beispiel; andere Komponentennamen folgen npx @cloudflare/kumo ls — nicht raten.

Fall 2: Mit der CLI Docs nur lesend nachschlagen. npx @cloudflare/kumo ls listet alle Komponenten, npx @cloudflare/kumo doc Button holt Docs einer Komponente, npx @cloudflare/kumo docs holt alle Docs. Passt, wenn Sie noch nicht entschieden haben, welche Seite Sie ändern, und zuerst die API prüfen wollen. Die Notizen schreiben weder das Ausgabeformat der Docs noch einen Offline-Cache; Nachschlagen reicht, Code muss nicht sofort geändert werden. Schlägt ein Befehl fehl, zurück zu https://github.com/cloudflare/kumo und abgleichen; nicht auf eine nie verzeichnete Installationsweise wechseln.

Nutzungsgrenzen

Installationsgrenze: Offiziell steht nur pnpm add @cloudflare/kumo und die Peer-Abhängigkeiten react, react-dom, @phosphor-icons/react; keinen nie verzeichneten Installer nutzen. Laufzeitgrenze: Das Beispiel sind React-Komponenten und ein Stileingang; eine Nutzung ohne React ist nicht geschrieben. Fähigkeitsgrenze: Es übernimmt Tastaturnavigation, Fokusverwaltung und ARIA und behauptet, einem Designsystem zu entsprechen; es steht nicht, dass das visuelle Theme jeder Seite der Cloudflare-Site gleichen muss. CLI-Grenze: Prüfbar sind ls, doc Button, docs. Die Basisbibliothek ist Base UI, siehe https://base-ui.com/ aber die Notizen ordnen nicht jede Kumo-Komponente eins zu eins Base UI zu.