现代 React 组件库 - 70+ 可访问、可主题的组件 基础UI 原始人,动画 动议,并使用 Tailwind CSS v4 设计符号来命名.
先决条件
| 依赖性 | 版本 |
|---|---|
| 反应 | >= 19 |
| 反应 DOM | >= 19 |
| 尾风 CSS | >= 4.0 |
反应19是一个硬性要求 - 组件使用现代 ref-as-prop API 没有 forwardRef 嘘 Tailwind v4 必须先在您的工程中设置和编译; Appica UI 依赖您的工程的 Tailwind来编译组件样式 .
安装
npm install @appica/ui-react
# or
yarn add @appica/ui-react
# or
pnpm add @appica/ui-react
# or
bun add @appica/ui-react
配置尾风
在您的全局样式表中导入 Tailwind 后的设计符号, 并添加一个 @source 指令所以 Tailwind 扫描编译库的类名 :
@import 'tailwindcss';
@import '@appica/ui-react/styles.css';
@source '../node_modules/@appica/ui-react/dist';
别跳过
@source- 并给它一个真正的路径.尾风忽略
node_modules默认。 没有@source指令不会生成编译组件中使用的实用类,它们会变成不风格.
@source选择路径或阴影 相对于包含它的样式表而不是一个赤裸的包名 -@source '@appica/ui-react'不解而无声地扫描任何东西。 数../需要达到node_modules从您的 CSS 文件: 深为一层的样式表( S)app/globals.css, (中文(简体) ),src/index.css)需要单人../;更深处(src/styles/app.css需求../../。这符合 Tailwind 自己的@source文档,其实例是@source '../node_modules/@my-company/ui-lib';。 。 。 .
没有尾风
Appica UI建于Tailwind上,上面的源扫描设置是推荐路径. 如果您的工程不使用 Tailwind, 请跳过该步骤并导入预建的样式表 - 一个包含每个组件的样式和完整符号系统编译的自定义文件 :
@import '@appica/ui-react/css';
没有捆绑? 从 CDN 直接链接( 为缓存稳定性选择一个版本) :
<link rel="stylesheet" href="https://unpkg.com/@appica/ui-react@latest/appica.css" />
尾风保持了可选的对等依赖性,所以在您走这条路径时,没有任何东西代表您安装. 设计符号仍为 CSS 变量, 因此它们仍然以同样的方式工作 - 导入后重新定义变量 :
:root {
--primary: oklch(60% 0.25 150);
}
别同时装货.
预建的文件捆绑了Tailwind的"飞行前"重置,只有象征变量(颜色,字体,光线,阴影)仍然可以压倒一切——在发布时结构的公用设施被冻结. 如果您已经运行 Tailwind, 请使用 配置尾风 换成是,否则你会两次运送重置和公用事业.
添加提供者
将您的应用程序包入 ThemeProvider 以启用主题和暗模式,而不闪出错误的主题:
import { ThemeProvider } from '@appica/ui-react/providers/theme-provider'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}
使用组件
从它们的子路径导入组件以获取最小的捆绑 :
import { Button } from '@appica/ui-react/button'
export default function App() {
return <Button>Get started</Button>
}
见 安装指南 用于特定框架注释(Next.js、Vite、TanStack Start、Remix、Astro),以及 他们 要定制颜色,光度,和符号.
对于人工智能特工
如果您是一个编码代理从读取 node_modules,正确写入 Appica UI 代码的规则 agent-rules.md,在此文件旁边。 在写入任何组件或CSS前读取. 它能防止的两个错误是昂贵的: 一个缺失 @source 指令使每个部件都不再被套用,而且以公共设施为主(bg-gray-100)绕过符号系统.
每个文件页都作为干净的标记 <url>.md - 获取 https://appica.dev/ui/components/react/button.md,而不是 HTML 页面。 完整的索引,有一个指令块,在 https://appica.dev/ui/react/llms.txt。 。 。 .
如果你是人 设置一个项目: 将这些规则 粘入你自己 AGENTS.md 所以,你的经纪人装满他们的每一场课。 见 设置您的编码代理 一个复制块.
更改日志
每一版中的变化都发生在 CHANGELOG.md,在此文件旁边,并打开 appica.dev/ui/changelog (中文(简体) ) 与随同运出的文件和Figma更新一起.
图像设计文件
每一个部分都可以免费使用 图像设计文件 - 变体,尺寸,和状态 反射一对一与代码,基于相同的设计符号。 设计和开发来自一个单一的真理来源.
随时更新
跟随 @ Appica dev 发布公告和更新.
许可证
麻省理工学院 阿皮卡语Name
可在个人和商业项目中自由使用.