ui-layouts/uilayouts

これは何？

主な機能

• 01きらめき、スポットライト、マウストレイル、画像の波紋などのアニメーションエフェクト用コンポーネント。
• 02アコーディオン、ドロワー、モーダル、カルーセル、範囲スライダー、ファイルアップロードなどの一般的なUIコントロール。
• 03React向けに構築され、TypeScriptで記述され、Tailwind CSSでスタイルを設定。
• 04アニメーションにはFramer Motion（motionパッケージ）を使用。
• 05すぐに使えるブロックと、実験的なコンポーネントを扱うLabsセクション。

ユースケース

• マーケティング用ランディングページに、アニメーション付きのヒーローセクションやビジュアルエフェクトを追加する。
• Reactアプリでファイルアップロード、スライダー、タグ入力などのインタラクティブなコントロールを構築する。
• 動きの豊かなコンポーネントを使って、クリエイティブなポートフォリオサイトを試作する。

トピック

よくある質問

uilayouts とは？

Framer Motionを基盤とし、shadcn風の形式で提供される、ReactとTailwind CSS向けのアニメーションUIコンポーネント、エフェクト、既製ブロックのライブラリ。 UI Layoutsは、クリエイティブで動きのあるインターフェースを備えたWebサイトを構築するための、オープンソースのコンポーネントライブラリです。きらめき、スポットライト、マウストレイル、画像の波紋などのエフェクトに加え、アコーディオン、ドロワー、モーダル、カルーセル、スライダー、ファイルアップロード、パスワード入力欄といった一般的なコントロールも揃っています。

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

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

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

半年以内に更新あり。uilayouts の最終コミットは 2026年8月23日 です。

uilayouts は何に使えますか？

マーケティング用ランディングページに、アニメーション付きのヒーローセクションやビジュアルエフェクトを追加する。 Reactアプリでファイルアップロード、スライダー、タグ入力などのインタラクティブなコントロールを構築する。 動きの豊かなコンポーネントを使って、クリエイティブなポートフォリオサイトを試作する。

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

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