Repolode
提交项目
magicuidesign

magicuidesign/magicui

一个基于 React 和 Tailwind CSS 的动效组件库，可直接复制到 Next.js 或 shadcn/ui 项目中使用。

在 GitHub 查看官网
Star
22,768
Fork
1,195
未关闭 Issue
1
最近提交
4天前

这是什么？

Magic UI 是一套面向 React 应用的动效组件与视觉效果集合。它不是通过 npm 安装后直接导入，而是把组件源码复制到项目里再按需修改，与 shadcn/ui 的使用方式一致。

组件基于 TypeScript、Tailwind CSS 和 Framer Motion 构建，主要面向 Next.js 项目。库中包含动画区块、背景、按钮、文字特效等常见的落地页元素，适合快速做出设计原型。

项目采用 MIT 许可证，并提供带组件预览和安装说明的在线文档站点。

核心功能

  • 01组件以复制粘贴方式使用，不依赖额外安装的包。
  • 02基于 React、TypeScript、Tailwind CSS 和 Framer Motion 构建。
  • 03包含动画背景、按钮和文字特效等组件。
  • 04提供带组件预览的文档站点。

适用场景

  • 为 Next.js 落地页添加动效首屏和视觉效果。
  • 在基于 shadcn/ui 的项目中快速原型化界面动效。
  • 以动效组件为起点进行二次修改和定制。

快速上手

  1. 1

    访问文档网站浏览组件

  2. 2

    如需添加组件，请阅读贡献指南

使用前须知

  • README 中没有安装命令；组件是复制到项目中使用，而不是作为包安装。
  • 文档托管在外部网站 magicui.design。

标签

#react#tailwindcss#ui-components#animation#nextjs#framer-motion#typescript#components#shadcn-ui

常见问题

magicui 是什么？
一个基于 React 和 Tailwind CSS 的动效组件库，可直接复制到 Next.js 或 shadcn/ui 项目中使用。 Magic UI 是一套面向 React 应用的动效组件与视觉效果集合。它不是通过 npm 安装后直接导入，而是把组件源码复制到项目里再按需修改，与 shadcn/ui 的使用方式一致。
magicui 可以免费使用吗？用的什么许可证？
magicui 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
magicui 还在维护吗？
活跃维护中。magicui 最近一次提交是在 2026年10月17日。
magicui 适合用来做什么？
为 Next.js 落地页添加动效首屏和视觉效果。 在基于 shadcn/ui 的项目中快速原型化界面动效。 以动效组件为起点进行二次修改和定制。
magicui 怎么安装和运行？
访问文档网站浏览组件 如需添加组件，请阅读贡献指南
在哪里获取 magicui？
源代码和安装说明在 GitHub 上：https://github.com/magicuidesign/magicui

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

相关项目