如何快速上手Park UI：5分钟完成React组件集成

【免费下载链接】park-ui Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks. 项目地址: https://gitcode.com/gh_mirrors/pa/park-ui

Park UI是一套基于Ark UI和Panda CSS构建的精美组件库，支持多种JavaScript框架。本文将为你提供一个简单快速的指南，帮助你在5分钟内完成Park UI与React项目的集成，让你轻松拥有专业级UI组件。

📋 准备工作：环境要求

在开始之前，请确保你的开发环境满足以下条件：

• Node.js 16.x或更高版本
• npm、yarn或bun包管理器
• 已创建的React项目（推荐使用React 18+）

如果你还没有React项目，可以使用以下命令快速创建：

npx create-react-app my-park-ui-app
cd my-park-ui-app

🚀 第一步：安装Park UI组件库

Park UI提供了便捷的安装方式，你可以根据自己喜欢的包管理器选择以下命令之一：

使用npm：

npm install @park-ui/react

使用yarn：

yarn add @park-ui/react

使用bun：

bun add @park-ui/react

⚙️ 第二步：配置Panda CSS

Park UI基于Panda CSS构建，需要进行简单的配置：

1. 安装Panda CSS依赖：

npm install -D @pandacss/dev

2. 初始化Panda CSS配置：

npx panda init

3. 在panda.config.ts中添加Park UI预设：

import { defineConfig } from "@pandacss/dev"
import { parkPreset } from "@park-ui/preset"

export default defineConfig({
  presets: [parkPreset],
  // 其他配置...
})

🎨 第三步：使用Park UI组件

现在你可以开始在React项目中使用Park UI组件了。以下是一个简单的按钮组件示例：

import { Button } from '@park-ui/react'

function App() {
  return (
    <div className="App">
      <Button>点击我</Button>
      <Button variant="secondary">次要按钮</Button>
      <Button variant="destructive">危险按钮</Button>
    </div>
  )
}

export default App

丰富的组件示例

Park UI提供了多种组件示例，你可以在components/react/src/examples/目录下找到各种组件的使用方式，例如：

• 按钮组件：components/react/src/examples/button/ButtonExample.tsx
• 卡片组件：components/react/src/examples/card/CardExample.tsx
• 表单组件：components/react/src/examples/input/InputExample.tsx

💡 实用技巧：定制主题

Park UI支持主题定制，你可以在packages/preset/src/theme/目录下找到主题配置文件，调整颜色、字体等样式：

• 颜色配置：packages/preset/src/theme/colors/
• 令牌配置：packages/preset/src/theme/tokens/
• 文本样式：packages/preset/src/theme/text-styles.ts

📚 探索更多组件

Park UI提供了丰富的组件库，包括：

• 基础组件：按钮、输入框、卡片、徽章等
• 表单组件：复选框、单选框、下拉选择器等
• 数据展示：表格、进度条、评分等
• 导航组件：标签页、面包屑、分页等

你可以在components/react/src/components/ui/目录下查看所有可用组件。

🔧 故障排除

如果遇到问题，可以查看以下资源：

• 官方文档：website/src/content/docs/
• 组件源码：components/react/src/components/ui/
• 示例代码：components/react/src/examples/

🎉 完成集成

恭喜！你已经成功将Park UI集成到React项目中。现在你可以开始使用这些精美的组件来构建你的应用程序了。Park UI的组件设计遵循现代UI/UX原则，确保你的应用既美观又易用。

希望这个快速指南能帮助你快速上手Park UI。如果有任何问题或建议，欢迎参与项目的开发和讨论！

【免费下载链接】park-ui Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks. 项目地址: https://gitcode.com/gh_mirrors/pa/park-ui