Repolode
提交项目
ui-layouts

ui-layouts/uilayouts

基于 React、Tailwind CSS 和 Framer Motion 的动效 UI 组件库，包含组件、视觉特效与现成区块。

在 GitHub 查看官网
Star
3,808
Fork
228
未关闭 Issue
10
最近提交
2个月前

这是什么？

UI Layouts 是一个开源组件库，用于构建带有创意动效的网站界面。组件涵盖闪光粒子、聚光灯、鼠标拖尾、图片水波纹等视觉特效，也包括手风琴、抽屉、弹窗、轮播、滑块、文件上传、密码输入等常见控件。

大部分组件使用 TypeScript 编写，面向 React，样式基于 Tailwind CSS，动画多由 Framer Motion 实现。使用前需要安装 Tailwind CSS、motion 以及 clsx 和 tailwind-merge，并添加一个 `cn` 工具函数和媒体查询 Hook。项目还提供 Labs 板块，用于展示实验性组件。

它适合希望快速获得精致、动效丰富的界面组件，而不想从零实现这些效果的开发者和设计师。

核心功能

  • 01提供闪光粒子、聚光灯、鼠标拖尾、图片水波纹等动效特效组件。
  • 02包含手风琴、抽屉、弹窗、轮播、范围滑块、文件上传等常见控件。
  • 03基于 React 与 TypeScript 开发，样式使用 Tailwind CSS。
  • 04动画由 Framer Motion（motion 包）实现。
  • 05提供可直接使用的现成区块，以及实验性的 Labs 板块。

适用场景

  • 为营销落地页添加动态首屏区块或视觉特效。
  • 在 React 应用中实现文件上传、滑块、标签输入等交互控件。
  • 用动效丰富的组件快速搭建创意作品集网站原型。

标签

#react#tailwindcss#component-library#framer-motion#animation#typescript#ui-components#accertinity#accordion-component#animated-tabs

常见问题

uilayouts 是什么？
基于 React、Tailwind CSS 和 Framer Motion 的动效 UI 组件库，包含组件、视觉特效与现成区块。 UI Layouts 是一个开源组件库，用于构建带有创意动效的网站界面。组件涵盖闪光粒子、聚光灯、鼠标拖尾、图片水波纹等视觉特效，也包括手风琴、抽屉、弹窗、轮播、滑块、文件上传、密码输入等常见控件。
uilayouts 可以免费使用吗？用的什么许可证？
uilayouts 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
uilayouts 还在维护吗？
半年内有更新。uilayouts 最近一次提交是在 2026年8月23日。
uilayouts 适合用来做什么？
为营销落地页添加动态首屏区块或视觉特效。 在 React 应用中实现文件上传、滑块、标签输入等交互控件。 用动效丰富的组件快速搭建创意作品集网站原型。
在哪里获取 uilayouts？
源代码和安装说明在 GitHub 上：https://github.com/ui-layouts/uilayouts

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目