magicuidesign/magicui

これは何？

主な機能

• 01パッケージ依存を追加せず、コンポーネントをコピー＆ペーストして利用できます。
• 02React、TypeScript、Tailwind CSS、Framer Motionで構築されています。
• 03アニメーション付きの背景、ボタン、テキストエフェクトを収録しています。
• 04コンポーネントのプレビューを掲載したドキュメントサイトがあります。

ユースケース

• Next.jsのランディングページに、アニメーション付きのヒーローセクションやエフェクトを追加する。
• shadcn/uiベースのプロジェクトで、インターフェースの動きを手早くプロトタイプする。
• アニメーション付きコンポーネントをベースとして取り入れ、カスタマイズする。

クイックスタート

1. 1

   ドキュメントサイトでコンポーネントを確認する

2. 2

   コンポーネントを追加する場合は、コントリビューションガイドを読む

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

• !READMEにはインストールコマンドがありません。コンポーネントはパッケージとしてインストールするのではなく、プロジェクトにコピーして使用します。
• !ドキュメントは magicui.design で外部公開されています。

トピック

よくある質問

magicui とは？

Next.jsやshadcn/uiのアプリにコピーして使える、アニメーション付きUIコンポーネントとエフェクトを集めたReact・Tailwind CSSライブラリです。 Magic UIは、Reactアプリ向けのアニメーション付きコンポーネントとビジュアルエフェクトを集めたライブラリです。パッケージをインストールしてインポートするのではなく、shadcn/uiと同じ方式で、コンポーネントのソースをプロジェクトにコピーし、必要に応じて調整して使います。

magicui は無料で使えますか？ライセンスは？

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

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

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

magicui は何に使えますか？

Next.jsのランディングページに、アニメーション付きのヒーローセクションやエフェクトを追加する。 shadcn/uiベースのプロジェクトで、インターフェースの動きを手早くプロトタイプする。 アニメーション付きコンポーネントをベースとして取り入れ、カスタマイズする。

magicui のインストール方法は？

ドキュメントサイトでコンポーネントを確認する コンポーネントを追加する場合は、コントリビューションガイドを読む

magicui はどこで入手できますか？

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