ui-layouts

React / Next.js 开发者寻找可直接复制粘贴的动效组件时，UI-Layouts 提供 60+ 基于 TailwindCSS、Framer Motion 和 GSAP 构建的开源组件，覆盖视觉特效、表单、导航、媒体展示等场景。

它包含哪些核心组件

官网列出 60+ 组件，按用途分为视觉特效、表单、3D 视觉、布局、媒体画廊、导航、代码展示等类别。

• 视觉特效: Mac-Genie、Liquid-Glass、Noise Blur、Vignette、liquid-gradient、Spotlight cards、Image Reveal
• 动效块: Animated Beam、Motion Swapy、Drag Items、Timeline Animation、Scroll Animation、Scroll Text、Text Maruqee、Randomized Text、Image Mousetrail、Horizontal Scroll、Stacking Card、Smooth-Scroll、Sticky Scroll、Sparkles、Sparkles Title、Marquee Infinity、Brand Shimmer Loader、Type Writer、Terminal UI
• 覆盖层: Dialog、Media Modal、Linear Modal、Gallery Modal、Responsive Modal、Directional Drawer、Motion Drawer
• 表单组件: Color Picker、Buttons、Motion Number、Range Slider、Password、UTube Tags、Phone Input、Datetime Picker、Multi Selector、File Upload
• 3D 视觉: Globe、Img Ripple Effect、R3F Blob、Mesh Gradients
• 布局: Footers、Responsive-Header、Grid、Masonary Cards、Highlights、Buy Me A Coffee、Hover cards、Product-Cards、gradient-border
• 媒体画廊: Clip-Path Image Masking、Video Masking、Progressive Carousel、Carousel、Framer Carousel
• 导航/手风琴: Tabs、Image Tabs、Magnified-Doc Disclosure、Accordion、FAQs、Image Accordion
• 代码展示: Code Block、Tree Code Viewer、Code Tabs MDX、Code Tabs

适合谁用

面向需要快速集成交互动效的 React / Next.js 前端开发者，尤其是追求创意视觉和动画效果的团队或个人。

• React 开发者: 组件基于 React 和 Next.js 构建，可直接复制粘贴使用
• TailwindCSS 用户: 所有组件样式基于 TailwindCSS，易于自定义
• 动效需求者: 依赖 Framer Motion 和 GSAP 实现流畅动画，如 Animated FAQs 组件使用 Framer Motion 实现展开/折叠过渡

怎么上手

官网提供预览和代码安装指引，组件支持 npm 安装，例如 Animated FAQs 组件安装命令为 npm install motion。

• 直接复制: 每个组件页面提供预览和代码，可一键复制粘贴到项目中
• npm 安装: 部分组件如 Animated FAQs 需安装 motion 依赖
• 开源协议: MIT 协议，可自由使用和修改

收费与限制

官网明确标注 100% 开源，部分高级组件（如 Blocks Pro）需付费，但基础组件库免费。

• 免费组件: 60+ 组件完全免费，MIT 协议
• 付费扩展: 存在 Blocks (Pro) 等付费模块，但基础库无限制
• 无中文界面: 官网为英文，但社区有中文介绍（如 HelloGitHub 收录）

和同类组件的差异

相比 shadcn/ui 等库，UI-Layouts 更侧重动效和创意视觉，组件数量更多（60+），且提供 3D 和复杂动画组件。

• 动效优先: 包含大量基于 Framer Motion 和 GSAP 的动画组件，如 Sparkles、Image Reveal、Timeline Animation
• 3D 支持: 提供 Globe、R3F Blob、Mesh Gradients 等 Three.js 组件
• 社区活跃度: GitHub 星数 3.5k，8 位贡献者，7 个 Issues，最新版本活跃

常见问题

Q1：UI-Layouts 的组件是否支持 TypeScript？

A1：支持，官网标注主语言为 TypeScript，组件代码包含类型定义。

Q2：UI-Layouts 的 Animated FAQs 组件如何安装？

A2：需要先安装 motion 依赖，命令为 npm install motion，然后复制官网提供的组件代码即可。

Q3：UI-Layouts 的组件能否用于商业项目？

A3：可以，基础组件采用 MIT 协议，允许商业使用和修改，但付费模块（如 Blocks Pro）需另行授权。

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

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