@darkalpha/nova-ui (法语)
色彩丰富,可访问,可主题反应组件.
pnpm add @darkalpha/nova-ui
import { Button, ThemeProvider } from "@darkalpha/nova-ui";
import "@darkalpha/nova-ui/styles.css";
<ThemeProvider theme="ocean" brand={{ primary: "#0f766e" }}>
<Button>Get started</Button>
</ThemeProvider>;
入境点
| 导入 | 目录 |
|---|---|
@darkalpha/nova-ui | 组件, ThemeProvider, (中文(简体) ), ThemeScript钩子, cn,以及符号 API(createTheme, (中文(简体) ), registerTheme, (中文(简体) ), auditContrast. ) (中文(简体) ) |
@darkalpha/nova-ui/styles.css | 需要一次(除非您使用) tailwind.css) (中文(简体) ). Tokens, 重设范围到 .nv-theme,以及组件样式。 没有全球飞行前. |
@darkalpha/nova-ui/themes.css | 可选的 所有预设为 [data-nv-theme="…"] 零JS主题的块. |
@darkalpha/nova-ui/react-hook-form | 反应-hook-form(任何解析器,如zod)的可选约束. 要求数 react-hook-form 7.55;从未被主条目装入. |
@darkalpha/nova-ui/rich-text-editor | RichTextEditor 财务报告和审定财务报表 RichTextViewer,基于Tiptap/ProseMilrror。 Tiptap 是一个可选的对等依赖: 只有当您使用编辑器( 命令下面) 时才会安装它 。 它的风格已经进入了 styles.css。 。 。 . |
@darkalpha/nova-ui/kaveh | Kaveh品牌套件(logo家族、品牌元素、页面部分、卡片)和Yalda/Nowruz季节性艺术品。 与 kaveh, (中文(简体) ), kaveh-yalda 财务报告和审定财务报表 kaveh-nowruz 主题. |
@darkalpha/nova-ui/tailwind.css | 对于Tailwind v4应用程序, 改为 styles.css数字 : @import "tailwindcss"; @import "@darkalpha/nova-ui/tailwind.css"; |
丰富的文本编辑器
Tiptap 没有安装 Nova UI 。 导入的应用程序 @darkalpha/nova-ui/rich-text-editor 加上一点:
pnpm add @tiptap/core @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/extensions @tiptap/suggestion @tiptap/extension-bubble-menu @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-table @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-typography
使用 Tailwind CSS v4 的应用程序
导入 tailwind.css 从您的 CSS 条目中删除 styles.css 导入 :
@import "tailwindcss";
@import "@darkalpha/nova-ui/tailwind.css";
Nova UI号作为源头(仓库、范围基地、材料、代用品等)
作为 bg-primary加上一个 @source 对于组件,所以您的构建生成
和你的部分公用事业。 正在装入已预编译的
styles.css 也给你们两个分别排序的 utilities 分层:
.flex-col 然后可以跟随图书馆的 sm:flex-row 并在每个宽度上获胜.
带有类前缀( N)prefix(tw)),使用时 styles.css 取而代之; 前缀
公用事业不能与组件相撞.
主题提供
| Prop | 类型 | 默认 |
|---|---|---|
theme | 预设名称、注册编号或 ThemeDefinition | "vibrant" |
brand | { primary?, secondary?, accent?, neutral? } (hex) (英语) | —— 说 |
overrides | { light?: {...}, dark?: {...} } 语义符号 | —— 说 |
mode 编号 : defaultMode 编号 : onModeChange | "light" | "dark" | "system" | 主题偏好, 否则 "system" |
storageKey | 持续模式( 以 <ThemeScript>(中文(简体) ) | —— 说 |
radius | "none" | "sm" | "md" | "lg" | "xl" | 从主题 |
density | "compact" | "comfortable" | "spacious" | 从主题 |
fonts | { sans?, display?, mono? } | 从主题 |
motion | "system" | "reduce" | "system" |
dir | "ltr" | "rtl" | 继承,否则 "ltr" |
完整的文档、符号参考和主题游乐场都在 apps/docs。 。 。 .
同伴依赖性 : react 财务报告和审定财务报表 react-dom 18.2+或19 (中文(简体) ).