WHAT - 介绍一个不太一样的 UI 组件库 shadcn/ui

官方文档：https://ui.shadcn.com/docs

一、介绍

ShadCN (ShadCN/UI) 是一个现代的 React 组件库，旨在提供简洁、高效且美观的用户界面组件。它在设计和功能上类似于其他流行的 UI 组件库，如 Ant Design、Material-UI 等，但它有一些独特的特点和设计理念。

主要特点

1. 现代设计：

   • ShadCN 采用现代设计语言，注重简洁和一致性，适用于各种类型的应用程序。

2. 高度可定制：

   • 提供高度可定制的组件，允许开发者根据需求调整样式和行为。并且推荐使用 copy/paste 来使用组件。

3. 易于使用：

   • 组件接口设计简洁直观，易于上手，降低了开发难度。

4. 响应式设计：

   • 所有组件都支持响应式设计，可以在不同设备上良好地展示。

5. 丰富的组件库：

   • 提供了丰富的 UI 组件，如按钮、表单、对话框、表格等，满足日常开发需求。

6. 性能优化：

   • 组件在性能方面进行了优化，确保在大规模应用中也能流畅运行。

核心组件

ShadCN 提供了丰富的组件库，涵盖了常用的 UI 需求，包括但不限于：

• 按钮 (Button)：支持不同的样式和状态（默认、悬停、禁用等）。
• 输入框 (Input)：多种类型的输入框，如文本输入、密码输入等。
• 选择框 (Select)：支持单选、多选和搜索功能的选择框。
• 对话框 (Dialog)：模态和非模态对话框，用于弹出式内容展示。
• 表格 (Table)：支持分页、排序、筛选等功能的表格组件。
• 通知 (Notification)：用于全局或局部的消息提示。

示例代码

以下是一个使用 ShadCN 的简单示例，展示了如何在 React 应用中使用其组件：

import React from 'react';
import { Button, Dialog, Input } from 'shadcn';const MyComponent: React.FC = () => {const [isDialogOpen, setDialogOpen] = React.useState(false);const handleOpenDialog = () => {setDialogOpen(true);};const handleCloseDialog = () => {setDialogOpen(false);};return (<div><Button onClick={handleOpenDialog}>Open Dialog</Button><Dialog isOpen={isDialogOpen} onClose={handleCloseDialog} title="My Dialog"><Input placeholder="Type something..." /><Button onClick={handleCloseDialog}>Close</Button></Dialog></div>);
};export default MyComponent;

社区和支持

ShadCN 作为一个现代的 UI 组件库，通常会有活跃的社区支持和定期的更新。你可以通过访问其官方文档和 GitHub 仓库获取更多信息和最新的组件更新。

总结

ShadCN 是一个现代、高效的 React 组件库，提供了丰富的 UI 组件和高度的可定制性，适合各种类型的前端项目。通过简洁直观的接口和响应式设计，它能够帮助开发者快速构建美观、实用的用户界面。

二、copy/paste

The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled. Start with some sensible defaults, then customize the components to your needs. One of the drawbacks of packaging the components in an npm package is that the style is coupled with the implementation. The design of your components should be separate from their implementation.

ShadCN UI 建议通过 copy/paste 的方式使用提供的组件，主要有以下几个原因：

1. 高度可定制性

通过复制和粘贴代码，开发者可以对组件进行高度定制化修改，以满足特定的需求。与直接使用预制的、封装良好的组件相比，复制代码允许开发者直接访问和修改组件的实现细节，提供了更大的灵活性。

2. 避免依赖锁定

复制组件代码可以避免库版本更新带来的依赖问题。例如，如果一个库更新了某些组件，可能会引入不兼容的更改或破坏现有功能。通过直接拥有组件代码，开发者可以控制其稳定性和兼容性。

3. 学习和理解

复制和粘贴代码鼓励开发者阅读和理解组件的实现。这种方式可以帮助开发者学习最佳实践和设计模式，提高他们的技能水平，而不仅仅是使用黑盒组件。

4. 简化调试

拥有组件的完整代码可以简化调试过程。开发者可以直接在组件内部进行调试，而不必担心封装良好的库组件可能引入的复杂性。这使得问题排查更加直接和高效。

5. 项目需求变化

每个项目的需求可能不同，复制代码后可以根据具体项目的需求进行修改和调整。这种方式比通过配置或扩展库组件来实现特定需求更加灵活。