Skip to main content

​
概述

使用 shadcn/ui 构建，基于 Radix UI 提供无障碍支持。

​
组件列表

组件用途
Button按钮
Dialog弹窗
Slider滑块
Tabs标签页
Toast提示消息
Tooltip工具提示
Sheet侧边抽屉
Popover弹出框

​
目录结构

components
ui
button.tsx
dialog.tsx
slider.tsx
tabs.tsx
toast.tsx
tooltip.tsx
sheet.tsx
popover.tsx
seo

​
主题定制

/* globals.css */
:root {
  --primary: 258 84% 61%;      /* #654AEC */
  --primary-foreground: 0 0% 100%;
  /* ... */
}

​
使用示例

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';

function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        {/* 弹窗内容 */}
      </DialogContent>
    </Dialog>
  );
}

​
最佳实践

  1. 复用 shadcn/ui 组件，保持风格统一
  2. 遵循 Radix UI 的无障碍设计规范
  3. 通过 CSS 变量定制主题颜色