DavidHDev/react-bits

これは何？

主な機能

• 01テキスト、インタラクション、カード、背景の各カテゴリに、アニメーション付きコンポーネントと背景素材を215種類以上収録。
• 02各コンポーネントは、JavaScriptまたはTypeScriptと、CSSまたはTailwindのスタイルに対応。
• 03shadcnまたはjsrepo CLIで導入するか、ソースを直接コピーして利用可能。
• 04shadcn MCPレジストリを通じてAIコーディングエージェントと連携。
• 05背景、商品モックアップ、ロゴ、テクスチャ、サウンドを作成できる無料のブラウザツールを同梱。

ユースケース

• マーケティングサイトやランディングページに、目を引くテキストアニメーションやスクロール表示を追加する。
• Next.jsやReactアプリで、アニメーション付きのヒーローセクションやページ全体の背景を構築する。
• AIコーディングエージェントに、すぐ使えるコンポーネントをTailwindプロジェクトへ取り込ませる。
• ローンチやデモ向けに、商品画像、ループする背景動画、効果音を作成する。

クイックスタート

1. 1

   shadcn CLI でコンポーネントを追加する

   npx shadcn@latest add @react-bits/SplitText-TS-TW
2. 2

   または jsrepo で追加する

   npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

使う前に知っておきたいこと

• !ライセンス名に Commons Clause が含まれており、ソフトウェア自体の販売が制限されています。商用利用の前に LICENSE.md をお読みください。
• !リポジトリのメタデータではライセンスが検出されていません。ライセンス条件は LICENSE.md で直接確認してください。

トピック

よくある質問

react-bits とは？

shadcnまたはjsrepoから導入できる、無料でアニメーションやカスタマイズに対応したReact・Next.jsコンポーネントと背景素材を215種類以上収録したライブラリです。 React Bitsは、視覚的に印象的なWebインターフェースを構築するための、アニメーション付きインタラクティブなReact・Next.jsコンポーネント集です。分割テキスト、タイプライター、スクロール表示などのテキストアニメーションに加え、カーソルエフェクト、ホバー操作、カード、カルーセル、小規模なUIマイクロインタラクション、セクション全体を彩るアニメーション背景を収録しています。

react-bits は無料で使えますか？ライセンスは？

react-bits は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-bits は今もメンテナンスされていますか？

活発にメンテナンス中。react-bits の最終コミットは 2026年10月19日 です。

react-bits は何に使えますか？

マーケティングサイトやランディングページに、目を引くテキストアニメーションやスクロール表示を追加する。 Next.jsやReactアプリで、アニメーション付きのヒーローセクションやページ全体の背景を構築する。 AIコーディングエージェントに、すぐ使えるコンポーネントをTailwindプロジェクトへ取り込ませる。 ローンチやデモ向けに、商品画像、ループする背景動画、効果音を作成する。

react-bits のインストール方法は？

shadcn CLI でコンポーネントを追加する: npx shadcn@latest add @react-bits/SplitText-TS-TW または jsrepo で追加する: npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

react-bits はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/DavidHDev/react-bits