Facade UI

Facade UI（免费组件）

适用于本地商家、房地产公司和代理机构网站的动画 React 组件和页面区块。 专为 Next.js、Tailwind v4 和 shadcn 构建。此代码库包含 35 个免费项目，采用 MIT 许可。 包含 24 个 Pro 项目、实时预览文档和 MCP 服务的完整库位于 facadeui.com。

安装

任何项目都可以通过一条命令安装到你自己的项目中。源代码由你掌控。

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），因此会遵循你的主题。 按照安装指南添加四个额外令牌即可。

与你的 AI Agent 配合使用

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

闪耀按钮
悬停时带有柔和流光效果的胶囊按钮，提供三种变体、三种尺寸，以及一个轻轻向前移动的箭头。

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

布局

余烬渐变
温暖的表面上，铜色、森林绿和铁锈色层次缓缓流动，并带有胶片颗粒感。提供三种大地色预设，也可自定义颜色，还可选择缓慢循环切换配色。

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

本地商家

位置卡片
风格化 SVG 地图卡片，带有地图图钉、地址、营业时间、电话和 Google Maps 路线链接。

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。

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

大型页脚
本地商家大型页脚，包含带动画的新闻简报订阅区、链接列、NAP、营业时间、社交媒体链接和超大文字标志。

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

品牌标志墙
「深受信赖」文字标志网格，悬停时显示客户成果，也可选择双行跑马灯模式。

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

流程步骤
「工作原理」区块，滚动时线条逐渐绘制，经过各步骤时步骤会亮起。

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

数据统计条
展示四个醒目动画数字的横幅，配有标签、趋势和进入视野时绘制的细线。

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

团队网格
团队成员网格，配有渐变色姓名首字母头像、悬停时显示的简介、社交链接和招聘卡片。

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

转化

行动号召区块
页面结尾的行动号召面板，包含标题、两个操作按钮和一行安心提示。浅色页面使用深色样式，深色页面使用浅色样式。

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

专业版

预约时段、房贷计算器、估值漏斗、房源列表网格、多步骤潜在客户表单、热点楼层平面图 及另外 18 项：https://facadeui.com/pricing。一次性授权，可用于无限量客户项目。

许可证

本仓库中的所有内容均采用 MIT 许可证。专业版项目单独授权，详见 https://facadeui.com/legal/license。