Facade UI

Facade UI（無料コンポーネント）

地域の事業者、不動産会社、代理店のウェブサイト向けの、アニメーション付き React コンポーネントとページブロックです。 Next.js、Tailwind v4、shadcn 向けに構築されています。このリポジトリには、MIT ライセンスの無料アイテムが 35 点含まれています。 Pro アイテム 24 点、ライブプレビュー付きドキュメント、MCP サーバーを備えた完全版ライブラリは、facadeui.com にあります。

インストール

どのアイテムも、コマンド 1 つで自分のプロジェクトにインストールできます。ソースコードはそのまま利用できます。

npx shadcn@latest add https://facadeui.com/r/open-now-badge.json

または、components/facade/ からファイルをプロジェクトにコピーしてください。どのアイテムも依存するのは motion と lucide-react だけで、 セマンティックな Tailwind トークン（bg-background、text-muted-foreground、bg-brand）を使用するため、テーマに合わせて動作します。 インストールガイドにある追加の 4 つのトークンを、一度追加してください。

AI エージェントと一緒に使う

claude mcp add --transport http facade https://facadeui.com/api/mcp

続いて、「Austin の配管会社のランディングページを作成してください。Facade を使ってください」と指示します。MCP サーバーは list_components、get_component、get_install_command、suggest_page を公開しています。 llms.txt と、すべてのドキュメントページの Markdown 版もあります。

コンポーネント

ボタン

カーソルに引き寄せられるボタン
バネの物理法則を使ってカーソルに引き寄せられるボタンです。奥行きを出すため、ラベルはさらにわずかに遅れて動きます。

npx shadcn@latest add https://facadeui.com/r/magnetic-button.json

輝くボタン
ホバー時に柔らかな光が横切るピル型ボタンです。3 種類のバリエーションとサイズがあり、矢印が前方へ動きます。

npx shadcn@latest add https://facadeui.com/r/shine-button.json

テキスト

グラデーション見出し
強調した単語にゆっくりとブランドカラーのグラデーションをかける見出し、または行全体に柔らかなブランドカラーを一度だけ走らせる見出しです。

npx shadcn@latest add https://facadeui.com/r/gradient-heading.json

テキストの表示演出
スクロールして表示領域に入ると、ぼかしとフェードをかけながら、少しずつ上昇して単語ごとに現れる見出しです。

npx shadcn@latest add https://facadeui.com/r/text-reveal.json

カード

エージェントカード
イニシャルのアバター、評価、ライセンス、対応言語に加え、電話、メール、内覧のアクションを備えた不動産エージェントの連絡先カードです。

npx shadcn@latest add https://facadeui.com/r/agent-card.json

物件カード
ステータスバッジ、お気に入り登録用のハート、価格、住所、寝室数、浴室数、床面積を表示する物件カードです。

npx shadcn@latest add https://facadeui.com/r/property-card.json

スポットライトカード
柔らかな放射状のスポットライトと、カーソルに追従する光る境界線を備えたカードです。

npx shadcn@latest add https://facadeui.com/r/spotlight-card.json

データ

アニメーション付きカウンター
スクロールして表示範囲に入ると数値がカウントアップします。接頭辞、接尾辞、小数点、Intl 形式に対応しています。

npx shadcn@latest add https://facadeui.com/r/animated-counter.json

カウントダウン
オープンハウスやローンチまでの日数、時間、分、秒を、回転するフリップ数字でカウントダウンします。

npx shadcn@latest add https://facadeui.com/r/countdown.json

主な情報
アイコンと数値を並べた物件の主な情報欄です。スクロールして表示範囲に入ると数値がカウントアップします。

npx shadcn@latest add https://facadeui.com/r/key-facts.json

フォーム

掲載物件のフィルター
場所検索、タイプ選択チップ、ベッドルーム数とバスルーム数、両端で調整できる価格スライダー、検索結果数を備えた住まい検索フィルターです。

npx shadcn@latest add https://facadeui.com/r/listing-filters.json

価格切り替え
月額と年額を切り替える、つまみがスライドするスイッチです。価格の数字もアニメーションで切り替わります。

npx shadcn@latest add https://facadeui.com/r/price-toggle.json

ナビゲーション

スライド式タブ
バネのようなアニメーションでピル型のインジケーターがスライドする、アクセシブルなタブです。矢印キーで移動でき、コンテンツが滑らかにクロスフェードします。

npx shadcn@latest add https://facadeui.com/r/sliding-tabs.json

固定コンタクトバー
モバイル画面下部に表示される「電話」「テキスト」「道順」「予約」のバーです。下にスクロールすると隠れ、上にスクロールすると再表示されます。

npx shadcn@latest add https://facadeui.com/r/sticky-contact-bar.json

フィードバック

お知らせバー
プロモーションメッセージとリンクが切り替わるスリムな上部バーです。閉じると滑らかに折りたたまれます。

npx shadcn@latest add https://facadeui.com/r/announcement-bar.json

Cookie の同意
「すべて許可」「拒否」のほか、カスタマイズ可能な「アナリティクス」と「マーケティング」の切り替えを備えたフローティング同意カードです。

npx shadcn@latest add https://facadeui.com/r/cookie-consent.json

プロモーションバー
暖色系の火の粉が漂う背景に、お知らせ、短い電話番号のテキスト、リアルタイムのカウントダウンを表示するバーです。閉じた状態はページ再読み込み後も維持され、再表示時に一瞬ちらつくこともありません。

npx shadcn@latest add https://facadeui.com/r/promo-bar.json

星評価
レビュー数を表示する、アニメーション付きの小数評価対応星評価です。アクセシブルなインタラクティブ入力モードも備えています。

npx shadcn@latest add https://facadeui.com/r/star-rating.json

緊急性バッジ
リアルタイムのドットと、表示範囲に入るとアニメーションする任意の販売済み割合バーを備えた、希少性を示すバッジです。

npx shadcn@latest add https://facadeui.com/r/urgency-badge.json

レイアウト

残り火のグラデーション
銅色、森の緑、錆色が漂う、フィルムグレインを加えた温かみのある背景です。自然な色合いのプリセットを3種類用意しているほか、独自の色を設定でき、パレットをゆっくり変化させることもできます。

npx shadcn@latest add https://facadeui.com/r/ember-gradient.json

マーキー
ロゴやお客様の声をシームレスに無限スクロールで表示します。端のフェード、方向、速度、縦方向の表示に対応しています。

npx shadcn@latest add https://facadeui.com/r/marquee.json

リビール
スクロールに応じて要素を表示するラッパーです。フェード、上昇、ぼかし、拡大縮小のプリセットに加え、子要素を順番に表示する RevealGroup を備えています。

npx shadcn@latest add https://facadeui.com/r/reveal.json

スムーズなアコーディオン
高さが滑らかにアニメーションする、アクセシブルな FAQ アコーディオンです。プラスからマイナスへのアイコン変化に対応し、単一選択と複数選択を切り替えられます。

npx shadcn@latest add https://facadeui.com/r/smooth-accordion.json

ローカルビジネス

所在地カード
ピン、住所、営業時間、電話番号、Google マップの経路案内リンクを備えた、スタイリッシュな SVG 地図カードです。

npx shadcn@latest add https://facadeui.com/r/location-card.json

営業中バッジ
店舗独自のタイムゾーンと週間営業時間に基づいて、営業中または営業時間外をリアルタイムで表示するピル型バッジです。

npx shadcn@latest add https://facadeui.com/r/open-now-badge.json

営業時間
週間営業時間の一覧です。本日の営業時間を強調表示し、営業状況をリアルタイムで表示します。中休みや定休日にも対応しています。

npx shadcn@latest add https://facadeui.com/r/opening-hours.json

ヒーロー

ヒーロー、エージェンシー
大きな文字を中央に配置したスタジオ向けヒーローです。ウルトラマリンブルーの CTA と、控えめなクライアントロゴのマーキーを備えています。

npx shadcn@latest add https://facadeui.com/r/hero-agency.json

ヒーロー、ローカルビジネス
リアルタイムの評価、切り替わるサービス名、予約・レビュー・到着予定時刻のフローティングカードを備えた、ホームサービス向けヒーローです。

npx shadcn@latest add https://facadeui.com/r/hero-local-business.json

セクション

よくある質問セクション
アニメーション付きアコーディオン、お問い合わせを促すプロンプト、リッチリザルト用のFAQPage JSON-LDを備えた2カラムのFAQです。

npx shadcn@latest add https://facadeui.com/r/faq-section.json

大型フッター
アニメーション付きニュースレター、リンク列、NAP、営業時間、ソーシャルリンク、大きなワードマークを備えた、地域密着型ビジネス向けの大型フッターです。

npx shadcn@latest add https://facadeui.com/r/footer-big.json

ロゴクラウド
「信頼されています」というワードマークのグリッドです。ホバーすると顧客の成果を表示でき、2行のマーキーモードも任意で利用できます。

npx shadcn@latest add https://facadeui.com/r/logo-cloud.json

プロセスの手順
スクロールに合わせて線が描かれ、通過する手順が点灯する「仕組み」セクションです。

npx shadcn@latest add https://facadeui.com/r/process-steps.json

統計バンド
ラベル、トレンド、表示時に描画される細線を備えた、4つの大きな数値がアニメーションするバンドです。

npx shadcn@latest add https://facadeui.com/r/stats-band.json

チームグリッド
グラデーションのイニシャルアバター、ホバー時に表示されるプロフィール、ソーシャルリンク、採用カードを備えたチームメンバーのグリッドです。

npx shadcn@latest add https://facadeui.com/r/team-grid.json

コンバージョン

CTAセクション
見出し、2つのアクション、安心感を与える一文を備えた締めくくりのCTAパネルです。明るいページではダーク、暗いページではライトに表示されます。

npx shadcn@latest add https://facadeui.com/r/cta-section.json

Pro

予約枠、住宅ローン計算ツール、査定ファネル、物件リストグリッド、複数ステップのリードフォーム、ホットスポット付きフロアプランなど、さらに18種類：https://facadeui.com/pricing。買い切りライセンスで、クライアントのプロジェクトを無制限に利用できます。

ライセンス

このリポジトリ内のすべてのものにMITライセンスが適用されます。Proアイテムには別途ライセンスが適用されます。https://facadeui.com/legal/license をご覧ください。