React Bits：165+ アニメーション React 部品と 4 バリアント

README が数える 165+ コンポーネントと 4 カテゴリ

DavidHDev/react-bits の README は「最大級のアニメーション React ライブラリ」とし、165 以上の無料カスタマイズ可能アニメーションを Text Animations、Animations、Components、Backgrounds の四群に分類します。毎週増えると README が述べ、リポジトリ description は memorable websites 向け collection です。ホームは reactbits.dev で、完全な一覧や各 deps は README ではなくドキュメントサイト側です。GitHub メタデータは 4 万スター超規模ですが README に DL 数や LCP ベンチマークはありません。 追加段落：README一次情報に基づき、本リポジトリの公開範囲はドキュメントとソースに限定されます。star数やfork数はGitHubメタデータ由来の注目指標であり、機能保証やSLAを意味しません。導入判断では、READMEが示す具体コマンド・設定キー・バージョン番号を手元環境で再現し、期待する入出力が得られるかを記録してください。READMEに無い性能数値、互換マトリックス、セキュリティ監査結果は推測で補わず、issue/リリースノート/公式サイトで確認できる事実だけを採用記録に残します。

JS-CSS / JS-TW / TS-CSS / TS-TW の選び方

各コンポーネントは 4 バリアントを README が JS-CSS、JS-TW、TS-CSS、TS-TW と略称します。Tailwind を使うなら *-TW、型安全なら TS-*、CSS モジュール派なら *-CSS という README の意図です。README は依存最小・tree-shakeable と主張しますが、具体 package 名や KB 単位のサイズ表は README 内にありません。props で調整するかソースを直接編集する二択が README に書かれています。 追加段落：README一次情報に基づき、本リポジトリの公開範囲はドキュメントとソースに限定されます。star数やfork数はGitHubメタデータ由来の注目指標であり、機能保証やSLAを意味しません。導入判断では、READMEが示す具体コマンド・設定キー・バージョン番号を手元環境で再現し、期待する入出力が得られるかを記録してください。READMEに無い性能数値、互換マトリックス、セキュリティ監査結果は推測で補わず、issue/リリースノート/公式サイトで確認できる事実だけを採用記録に残します。

shadcn と jsrepo による CLI 取り込み

インストールは shadcn と jsrepo を README が推奨します。例示コマンドは npx shadcn@latest add @react-bits/BlurText-TS-TW です。各コンポーネントページにコピー可能 CLI が載り、reactbits.dev/get-started/installation が詳細ガイドです。手動では技術バリアントを選んでコードをコピペする方法も README にあります。jsrepo 固有のコマンド例は README 本文にはなく、ガイド参照が前提です。 追加段落：README一次情報に基づき、本リポジトリの公開範囲はドキュメントとソースに限定されます。star数やfork数はGitHubメタデータ由来の注目指標であり、機能保証やSLAを意味しません。導入判断では、READMEが示す具体コマンド・設定キー・バージョン番号を手元環境で再現し、期待する入出力が得られるかを記録してください。READMEに無い性能数値、互換マトリックス、セキュリティ監査結果は推測で補わず、issue/リリースノート/公式サイトで確認できる事実だけを採用記録に残します。

Background Studio・Shape Magic・Texture Lab

README の Creative Tools 表は 3 ツールを reactbits.dev/tools へリンクします。Background Studio はアニメ背景の探索・調整・video/image/code 書き出し。Shape Magic は形状間の inner rounded corner を SVG/React/clip-path で export。Texture Lab は noise/dither/ASCII 等 20+ 効果を画像/動画に適用し高品質 export。いずれも README 上は機能説明のみで、CLI や API 仕様はサイト側です。 追加段落：README一次情報に基づき、本リポジトリの公開範囲はドキュメントとソースに限定されます。star数やfork数はGitHubメタデータ由来の注目指標であり、機能保証やSLAを意味しません。導入判断では、READMEが示す具体コマンド・設定キー・バージョン番号を手元環境で再現し、期待する入出力が得られるかを記録してください。READMEに無い性能数値、互換マトリックス、セキュリティ監査結果は推測で補わず、issue/リリースノート/公式サイトで確認できる事実だけを採用記録に残します。

Vue/Svelte ポートとメンテナンス面

README は公式ポートとして vue-bits.dev と sveltebits.xyz を表で列挙します。メンテナーは David Haz、CONTRIBUTING.md と feature request テンプレートへ誘導しています。スポンサーに shadcnblocks（Diamond）と shadcncraft（Silver）が README に載ります。README は公開コード例から再実装した場合の credit 依頼 issue も案内しています。リリースタグは README 取得時点で空に近く、更新頻度は GitHub commits 側で見る必要があります。 追加段落：README一次情報に基づき、本リポジトリの公開範囲はドキュメントとソースに限定されます。star数やfork数はGitHubメタデータ由来の注目指標であり、機能保証やSLAを意味しません。導入判断では、READMEが示す具体コマンド・設定キー・バージョン番号を手元環境で再現し、期待する入出力が得られるかを記録してください。READMEに無い性能数値、互換マトリックス、セキュリティ監査結果は推測で補わず、issue/リリースノート/公式サイトで確認できる事実だけを採用記録に残します。

MIT + Commons Clause の商用上の注意

ライセンスは MIT + Commons Clause（LICENSE.md）です。MIT 部分はアプリ/サイト/製品への組み込み利用を許可し、Commons Clause はコンポーネント単体の販売・再ライセンス・再配布を制限します。README は personal/commercial use free と書きますが、部品パッケージとして再販する SaaS テンプレ事業などは条項と衝突し得ます。セキュリティ更新 SLA は README にありません。

BlurText-TS-TW で試す README どおりの手順

評価は README 例の npx shadcn@latest add @react-bits/BlurText-TS-TW を既存 Next/Vite React プロジェクトで実行し、生成ファイルが TS+Tailwind かを確認するのが最短です。reactbits.dev 上の同コンポーネントページで props 一覧を見、不要 animation を外したビルドサイズを vite build や next build の出力で比較する、という README が示す部品単位導入モデルに沿った確認です。4 バリアントを混在させると shadcn registry 名が増えるため、チーム内で *-TS-TW など 1 系統に固定するのが README の設計意図に合います。

編集部の結論

React Bits はランディングやプロダクト UI に動きを足したい React チーム向き。npx shadcn@latest add @react-bits/BlurText-TS-TW のように部品単位で入れられるが、Commons Clause は部品そのものの再販を禁じる。商用前は LICENSE.md で Commons 条項を確認し、reactbits.dev の該当コンポーネントページから 4 バリアントのうち 1 つを固定して bundle サイズを計測するのが現実的です。

公式情報源

1. Official documentation
2. Official README
3. Project repository