React 19 · TypeScript · Astro Docs
@ug666/react
一个面向业务项目的 React 19 UI 组件库，覆盖按钮、表单、反馈、导航、布局与常用 Hooks。 当前文档区基于 Astro 构建，所有演示均直接挂载真实 React 组件，适合快速查阅与落地复用。
24
组件文档
8
Hooks
16+
工具函数
① 安装
@ug666/utils 会作为依赖自动装入。
bun add @ug666/react② 引入主题样式（必须）
在项目入口（如 main.tsx / layout.tsx）引入一次；未引入时组件颜色不会生效。切换暗色模式给 <html> 加 class="dark" 即可。
import '@ug666/react/tokens.css'快速开始
使用 React JSX 直接组合组件与 Hooks，快速搭建业务页面。
import { useState } from 'react'
import { Button, Card, CardContent, CardHeader, CardTitle, useDebounce } from '@ug666/react'
export function DemoCard() {
const [keyword, setKeyword] = useState('')
const debouncedKeyword = useDebounce(keyword, 300)
return (
<Card>
<CardHeader>
<CardTitle>搜索示例</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<input value={keyword} onChange={(event) => setKeyword(event.target.value)} />
<Button>当前关键词：{debouncedKeyword || '未输入'}</Button>
</CardContent>
</Card>
)
}React 组件特性
围绕 React 业务开发效率设计，兼顾类型安全、交互体验与文档可读性。
React 19 组件体验
覆盖表单、反馈、导航、展示与布局等高频业务场景，统一交互与视觉语义。
真实 Demo 挂载
所有文档示例直接挂载真实 React 组件，展示状态、尺寸、变体与组合用法。
Hooks 配套齐全
内置 8 个常用 Hooks，覆盖防抖、分页、复制、表单状态等业务能力。
工具函数补充
结合 @ug666/utils 提供 16+ 通用工具函数，降低页面拼装与数据处理成本。
Astro 文档渲染
静态内容由 Astro 输出，交互区按需水合，兼顾 SEO、加载性能与演示体验。
路径完全隔离
React 文档统一位于 /react/*，与 Vue 文档路径分离，便于长期维护与扩展。