Three.jsとWebGLのコンポーネントを集めたカタログ。ヒーローセクション、背景、ボタン、テキストアニメーション、モーションデザインといった区分で並び、各ページにライブプレビューと正確なimport名、ランタイムの前提条件が載っている。
無料枠はnpmから入る。npm install @designcodeio/threeuiでパッケージを追加し、スタイルシートを一度読み込んでからPredictiveArcCanvasのような名前で個別にimportする。React 18.2以上とWebGL対応ブラウザが前提。
Proのソースはnpmに置かれていない。npx @designcodeio/threeui-cli add cross-beamのようにCLIで取得し、ブラウザのOAuthサインインを経てサーバーが課金状態を確認したあとにファイルが降りてくる。編集済みのファイルは--forceなしでは上書きされない。
Pro限定でMCPサーバーも公開している。https://threeui.com/api/mcpをAIコーディングクライアントに登録すると、search_catalogでカタログを検索し、get_item_sourceでソース一式、get_item_promptで実装用プロンプトを引ける。認証はOAuth 2.1で、未認証やProでないリクエストはカタログを読み込む前に弾かれる。全373点。
