1- 什么是 Magic UI？

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

2- 安装和初始化

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

2.1- 1 创建 Next.js 应用

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

2.2- 2 安装依赖项

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

2.3- 3 初始化 Magic UI 项目

pnpm dlx magicui-cli init

3- 配置 Tailwind CSS

在项目根目录下创建 tailwind.config.ts 文件，并进行配置。你还需要创建一个 components.json 文件来管理组件。

3.1- 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- 1 创建组件文件

mkdir components && touch components/Button.tsx

4.2- 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- 1 创建卡片组件文件

touch components/AnimatedCard.tsx

5.2- 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- 1 项目结构

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

6.2- 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- 1 安装 Chart.js

pnpm add chart.js react-chartjs-2

7.2- 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 提供了丰富的组件库，以下是一些常用组件的使用示例：

8.1- 1 卡片组件

import React from 'react';
import { Card } from 'magic-ui';

/
 * 示例卡片组件
 */
const ExampleCard = () => {
  return (
    <Card className="max-w-sm mx-auto">
      <Card.Header>
        <h2 className="text-xl font-bold">Card Title</h2>
      </Card.Header>
      <Card.Body>
        <p>This is an example of a card component.</p>
      </Card.Body>
      <Card.Footer>
        <Button>Learn More</Button>
      </Card.Footer>
    </Card>
  );
};

export default ExampleCard;

8.2- 2 表单组件

import React from 'react';
import { Form, Input, Button } from 'magic-ui';

/
 * 示例表单组件
 */
const ExampleForm = () => {
  return (
    <Form className="max-w-md mx-auto">
      <Form.Group>
        <Form.Label htmlFor="name">Name</Form.Label>
        <Input id="name" type="text" placeholder="Enter your name" />
      </Form.Group>
      <Form.Group>
        <Form.Label htmlFor="email">Email</Form.Label>
        <Input id="email" type="email" placeholder="Enter your email" />
      </Form.Group>
      <Button type="submit">Submit</Button>
    </Form>
  );
};

export default ExampleForm;

9- 总结

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