你好，React 界面开发者！🎨 今天，我们将深入了解 Radix UI 和 ShadCN UI，这两个用于创建现代、可访问和时尚用户界面组件的基本库，无需重新发明轮子。本博客就是使用 Next.js 15、TypeScript、用于数据验证的 Zod 和用于界面组件的 ShadCN UI 开发的。准备好探索了吗？
Radix UI：默认可访问的组件 🎯
Radix UI 是一个注重可访问性和性能的 React 组件库。每个组件都针对服务器端渲染（SSR）进行了优化，并遵循 ARIA 标准，这使其成为专业应用的理想选择。 🚀
为什么选择 Radix UI？
- ♿️ 内置 WCAG 2.1 可访问性
- 🎯 零 CSS 依赖
- 🔄 完整的 SSR 支持
- ⌨️ 键盘导航
- 📱 原生触摸支持
- 🎨 灵活的样式 API
安装 Radix UI
要开始使用 Radix UI，安装你需要的组件：
1# 安装特定组件
2npm install @radix-ui/react-dialog
3
4# 或安装多个组件
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip
使用示例：可访问的对话框
这是一个带有焦点管理和键盘事件处理的 Dialog 示例：
1import * as Dialog from '@radix-ui/react-dialog';
2import { useCallback } from 'react';
3
4export default function MyDialog() {
5 const handleOpenChange = useCallback((open: boolean) => {
6 console.log('Dialog state:', open);
7 }, []);
8
9 return (
10 <Dialog.Root onOpenChange={handleOpenChange}>
11 <Dialog.Trigger asChild>
12 <button className="button-primary">打开对话框</button>
13 </Dialog.Trigger>
14
15 <Dialog.Portal>
16 <Dialog.Overlay className="fixed inset-0 bg-black/50 animate-fade-in" />
17 <Dialog.Content className="dialog-content">
18 <Dialog.Title className="text-xl font-bold">
19 欢迎 👋
20 </Dialog.Title>
21 <Dialog.Description className="mt-2">
22 这个对话框完全可访问：试试使用 Tab 键、
23 Esc 键或屏幕阅读器！
24 </Dialog.Description>
25
26 <Dialog.Close asChild>
27 <button className="button-secondary mt-4">
28 关闭
29 </button>
30 </Dialog.Close>
31 </Dialog.Content>
32 </Dialog.Portal>
33 </Dialog.Root>
34 );
35}
Radix UI 对样式持开放态度，这使得你可以完美地将其与任何设计系统集成， 无论是
Tailwind CSS、CSS Modules 还是 Styled Components。
ShadCN UI：带样式和最佳实践的 Radix UI 🌈
ShadCN UI 不仅仅是一个样式化组件的集合：它是一个完整的工具包，结合了 Radix UI、Tailwind CSS 和 React 开发的最佳实践。它包括：
- 🎨 暗/亮主题
- 🔄 流畅的动画
- 📱 响应式设计
- 🎯 组件变体
- ⚡️ 优化的性能
安装 ShadCN UI
1# 初始安装
2npx shadcn@latest init
3
4# 添加特定组件
5npx shadcn@latest add button
6npx shadcn@latest add dialog
使用 ShadCN UI 和 TypeScript 的组件示例
1import { Button } from '@/components/ui/button';
2import { useState } from 'react';
3
4interface Props {
5 variant?: 'default' | 'destructive' | 'outline' | 'ghost';
6 children: React.ReactNode;
7}
8
9export default function MyButton({ variant = 'default', children }: Props) {
10 const [loading, setLoading] = useState(false);
11
12 return (
13 <Button
14 variant={variant}
15 disabled={loading}
16 onClick={() => setLoading(true)}
17 className="transition-all hover:scale-105"
18 >
19 {loading ? '加载中...' : children}
20 </Button>
21 );
22}
主题配置
ShadCN UI 允许深度主题定制：
1// tailwind.config.ts
2import { Config } from 'tailwindcss';
3
4export default {
5 darkMode: ['class'],
6 theme: {
7 extend: {
8 colors: {
9 primary: {
10 DEFAULT: 'hsl(var(--primary))',
11 foreground: 'hsl(var(--primary-foreground))',
12 },
13 // 添加你的自定义颜色
14 },
15 keyframes: {
16 'fade-in': {
17 '0%': { opacity: '0' },
18 '100%': { opacity: '1' },
19 },
20 },
21 animation: {
22 'fade-in': 'fade-in 0.2s ease-out',
23 },
24 },
25 },
26} satisfies Config;
为什么选择这个技术栈？🧐
-
最大化生产力
- 即用型组件
- 集成 TypeScript
- 优秀的开发体验（DX）
-
最佳性能
-
可维护性
-
可访问性
- 默认支持 WCAG 2.1
- 辅助功能测试
- 完整文档
项目最佳实践 🚀
- 组件组织
1// 按领域组织你的组件
2src/
3 components/
4 ui/ // ShadCN UI 组件
5 layout/ // 布局
6 forms/ // 表单组件
7 features/ // 特定功能组件
- 配合 React Hook Form 和 Zod 使用
1import { z } from 'zod';
2import { useForm } from 'react-hook-form';
3import { zodResolver } from '@hookform/resolvers/zod';
4
5const schema = z.object({
6 email: z.string().email(),
7 password: z.string().min(8),
8});
9
10type FormData = z.infer<typeof schema>;
总结 📝
在这两分钟内，我们探索了：
- 用于可访问和高性能 React 组件的 Radix UI
- 基于 Tailwind 的完整设计系统 ShadCN UI
- 组织和使用的最佳实践
- 与 TypeScript 和 Zod 的集成
这些工具的组合让你能够创建现代、可访问和可维护的界面，同时保持出色的开发体验！🎉
感谢你花时间了解 Radix UI 和 ShadCN UI。欢迎查看 Radix UI 官方文档 和 ShadCN UI 文档 来深入了解！很快我们将带来更多 React 最佳实践！
