如何在 React 项目中使用 Shadcn UI

Shadcn UI 是一个现代且灵活的 UI 组件库，旨在与 React 无缝协作。它提供了一组可复用的组件，可帮助您快速构建美观且响应迅速的用户界面。在这篇博文中，我将逐步指导您将 Shadcn UI 集成到您的 React 项目中。

先决条件

在开始之前，请确保您的机器上安装了以下内容：

Node.js（v12 或更高版本）
npm 或 yarn
一个 React 项目（使用 Create React App、Vite、Next.js 或任何其他设置创建）

步骤1：安装Shadcn UI

首先，你需要安装 Shadcn UI 及其依赖项。你可以使用 npm 或 yarn 来完成此操作。打开终端并导航到你的 React 项目目录，然后运行以下命令：

# Using npm
npm install @shadcn/ui

# Using yarn
yarn add @shadcn/ui

步骤2：使用Shadcn UI组件

Shadcn UI 提供了一个 CLI 工具，可以轻松生成组件。让我们用它npx shadcn来将一些组件添加到我们的项目中。

添加按钮组件

要添加按钮组件，请运行以下命令：

npx shadcn add button

此命令将在你的项目中生成一个 Button 组件。你现在可以在 React 组件中使用它了。以下是示例：

// src/App.js
import React from 'react';
import { Button } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
      </header>
    </div>
  );
}

export default App;

添加卡片组件

要添加 Card 组件，请运行以下命令：

npx shadcn add card

这将生成一个 Card 组件。你可以按如下方式使用它：

// src/App.js
import React from 'react';
import { Button, Card } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Card>
          <h2>Card Title</h2>
          <p>This is a card component.</p>
          <Button onClick={() => alert('Button inside card clicked!')}>Click Me</Button>
        </Card>
      </header>
    </div>
  );
}

export default App;

步骤3：自定义组件

Shadcn UI 组件高度可定制。您可以传递 props 来自定义其外观和行为。例如，您可以像这样自定义 Button 组件：

// src/App.js
import React from 'react';
import { Button, Card } from '@shadcn/ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Shadcn UI</h1>
        <Card>
          <h2>Card Title</h2>
          <p>This is a card component.</p>
          <Button color="primary" size="large" onClick={() => alert('Button inside card clicked!')}>
            Click Me
          </Button>
        </Card>
      </header>
    </div>
  );
}

export default App;

结论

在本指南中，我们了解了如何在 React 项目中设置 Shadcn UI 以及如何使用其组件。Shadcn UI 让您能够以最少的精力轻松构建美观且响应迅速的用户界面。探索 Shadcn UI 文档，了解更多组件和自定义选项。

Shadcn UI 使用技巧

探索文档：请始终参考官方Shadcn UI 文档，以获取有关组件、自定义选项和使用示例的最新信息。
组件自定义：Shadcn UI 组件设计为高度可定制。利用 props 调整组件的外观和行为，以满足您的需求。
主题：利用 Shadcn UI 的主题功能，让您的应用程序保持统一的外观和风格。查看文档，了解如何实现和自定义主题的详细信息。
CLI 工具：使用npx shadcnCLI 工具快速将组件添加到您的项目中。这可以节省您的时间并确保正确使用组件。

谢谢阅读！
Po。

文章来源：https://dev.to/sanditzz/how-to-use-shadcn-ui-with-a-react-project-gfh