Magic UI

Magic UI 动画组件库预览

1. 什么是 Magic UI？

Magic UI 是一个开源的用户界面库，提供了超过 20 个动画组件，这些组件是用 React、TypeScript、Tailwind CSS 和 Framer Motion 构建的。
它旨在帮助开发者快速创建美观且功能强大的用户界面。

2. 安装和初始化

要开始使用 Magic UI，你需要先创建一个新的 Next.js 应用，并安装必要的依赖项。
以下是具体步骤：

2.1. 创建 Next.js 应用

pnpm create next-app first-magic-ui-app

2.2. 安装依赖项

pnpm add tailwindcss@latest clsx tailwind-merge framer-motion tailwindcss-animate

2.3. 初始化 Magic UI 项目

pnpm dlx magicui-cli init

3. 配置 Tailwind CSS

在项目根目录下创建 tailwind.config.ts 文件，并进行配置。
初始化命令会同时自动生成一个 components.json 配置文件来管理组件。

3.1. 配置文件示例

// tailwind.config.ts
import { defineConfig } from 'tailwindcss';

export default defineConfig({
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
});

4. 创建和使用组件

Magic UI 提供了多种预构建的组件，你可以直接在项目中使用。
例如，要创建一个简单的按钮组件，可以按照以下步骤进行：

4.1. 创建组件文件

mkdir components && touch components/Button.tsx

4.2. 编写组件代码

import React from 'react';
import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';

/**
 * Button 组件
 * @param {Object} props - 组件属性
 * @param {string} props.className - 额外的 CSS 类名
 * @param {React.ReactNode} props.children - 按钮内容
 */
const Button = ({ children, className, ...props }) => {
  return (
    <button className={twMerge(clsx('btn', className))} {...props}>
      {children}
    </button>
  );
};

export default Button;

5. 高级功能

Magic UI 还支持高级动画和交互效果。
你可以使用 Framer Motion 来实现复杂的动画效果。
例如，创建一个带有动画效果的卡片组件：

5.1. 创建卡片组件文件

touch components/AnimatedCard.tsx

5.2. 编写组件代码

import React from 'react';
import { motion } from 'framer-motion';

/**
 * AnimatedCard 组件
 * @param {Object} props - 组件属性
 * @param {React.ReactNode} props.children - 卡片内容
 */
const AnimatedCard = ({ children }) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  );
};

export default AnimatedCard;

6. 实践项目

为了更好地理解和掌握 Magic UI，你可以尝试创建一个实际项目。
例如，一个展示 Pokémon 角色的应用。
通过这种方式，你可以更深入地了解如何使用 Magic UI 组件和 Tailwind CSS 进行开发。

6.1. 项目结构

my-pokemon-app/
├── components/
│   ├── Button.tsx
│   ├── AnimatedCard.tsx
│   └── ...
├── pages/
│   ├── index.tsx
│   └── ...
├── public/
│   └── ...
├── styles/
│   └── globals.css
├── tailwind.config.ts
└── ...

6.2. 示例页面代码

import React from 'react';
import Button from '../components/Button';
import AnimatedCard from '../components/AnimatedCard';

const HomePage = () => {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-4xl font-bold mb-4">Welcome to Pokémon World</h1>
      <AnimatedCard>
        <div className="p-4 bg-white shadow rounded">
          <h2 className="text-2xl font-semibold">Pikachu</h2>
          <p>Type: Electric</p>
          <Button className="mt-2">Catch</Button>
        </div>
      </AnimatedCard>
    </div>
  );
};

export default HomePage;

7. 图表说明

在实际项目中，图表是展示数据的有效方式。
你可以使用 Chart.js 或其他图表库来集成图表功能。

7.1. 安装 Chart.js

pnpm add chart.js react-chartjs-2

7.2. 创建图表组件

import React from 'react';
import { Bar } from 'react-chartjs-2';

/**
 * ChartComponent 组件
 * @param {Object} props - 组件属性
 * @param {Object} props.data - 图表数据
 */
const ChartComponent = ({ data }) => {
  return <Bar data={data} />;
};

export default ChartComponent;

8. 组件库的使用

Magic UI 的组件不是作为 npm 包从 magic-ui 导入的，而是采用与 shadcn/ui 相同的模式：通过 CLI 把组件源码复制到你的项目中，再从本地路径引用。
以下是一些常用组件的使用示例：

8.1. 添加边框光束组件 BorderBeam

pnpm dlx magicui-cli add border-beam

组件会生成在 components/magicui/border-beam.tsx，可直接放进任意相对定位的容器中使用：

import { BorderBeam } from '@/components/magicui/border-beam';

const ExampleCard = () => {
  return (
    <div className="relative mx-auto max-w-sm rounded-xl border p-4">
      <h2 className="text-xl font-bold">Card Title</h2>
      <p>This is an example of a card component.</p>
      <BorderBeam size={50} duration={6} />
    </div>
  );
};

export default ExampleCard;

8.2. 添加文字滚动组件 Marquee

pnpm dlx magicui-cli add marquee

import { Marquee } from '@/components/magicui/marquee';

const reviews = ['丝滑', '开箱即用', '动画细腻'];

const ExampleMarquee = () => {
  return (
    <Marquee pauseOnHover className="max-w-md">
      {reviews.map((review) => (
        <div key={review} className="mx-2 rounded-lg border px-4 py-2">
          {review}
        </div>
      ))}
    </Marquee>
  );
};

export default ExampleMarquee;

9. 总结

Magic UI 是一个非常灵活和强大的用户界面库，适合各种类型的前端开发项目。
通过上述步骤，你可以快速上手并创建出色的用户界面。
如果你有更多的需求或问题，可以参考官方文档和社区资源，获取更多的帮助和支持。