BadtzUI

BadtzUI 是专为高转化着陆页设计的开源 React 组件库，以「每周更新」和「生产级动画」为特色，与 shadcn/ui 生态兼容，提供 140+ 动画组件和全页模板。

它能做什么

BadtzUI 聚焦于营销站点和产品页，组件覆盖导航、Hero、定价表、推荐轮播、SaaS 启动模板等。所有组件均支持 Tailwind CSS v4 自定义主题和暗色模式，通过 CLI 或代码片段即可集成。

• 3D Wrapper: 将任意内容转为随光标旋转的 3D 交互卡片
• Animated Card 1-3: 三种预设动画卡片，支持自定义缩放和旋转
• Text Effects: Blur Reveal、Fade Up、Word Stagger 等文字入场动效
• Buttons: Glowing、Swipe、Gradient Slide、Confetti 等 7 种特殊按钮
• Backgrounds: Stripe Animated Gradient、Hyperspace Background 等动态背景

适合谁用

面向需要快速搭建着陆页的 React 开发者，尤其是 Next.js 用户。零配置即可在现有项目中使用，无需复杂设置。社区驱动，GitHub 上已有 245 星。

• 独立开发者: 用现成组件缩短从设计到上线的时间
• SaaS 团队: Pro 版提供完整定价页和启动模板骨架
• 设计师: 通过 Tailwind 类自由覆盖每个断点和状态的样式

收费与限制

核心库完全免费开源（MIT 协议，附加条款禁止未经修改的转售）。Pro 版为一次性付费，包含 140+ 动画块和全页模板，但无免费更新窗口。

• 免费版: 所有文档组件均可直接复制使用
• Pro 版: 额外提供 Landing Page Builder（即将推出）和高级模板
• 限制: 2025 年 7 月起仅支持 TypeScript，不再提供 JavaScript 版本

和同类差异

与 shadcn/ui 不同，BadtzUI 专门针对着陆页优化，内置 Framer Motion 驱动的微交互动画，且保持每周更新节奏。文档系统基于 Fumadocs，导航和搜索体验更接近 shadcn/ui 风格。

• 动画优先: 每个组件都附带生产级动画，非静态骨架
• 更新频率: 每周发布新组件或改进，Changelog 公开记录
• 生态兼容: 可直接与 shadcn/ui 组件混用，无冲突

常见问题

Q1：BadtzUI 的 3D Wrapper 组件如何控制旋转角度？

A1：通过 maxRotation 属性设置大型旋转角度（示例中为 20 度），translateZ 控制 Z 轴偏移，perspective 可关闭透视效果。代码示例见官网文档。

Q2：BadtzUI Pro 是否支持 React Server Components？

A2：根据第三方评测，Pro 版兼容 RSC，但需注意部分动画组件（如 Framer Motion）可能需要在客户端渲染。具体兼容性建议查阅 Pro 版文档。

更多同类工具与网站,可在落地页组件分类继续挑选。

信息核实于 2026年7月,具体以官网为准。