· Foundation ·

NOVA UI

专为现代 Web 应用设计的深色系组件库。基于 Web Components 实现，零依赖，与任何框架兼容。

Web Components

原生自定义元素，无框架依赖，Shadow DOM 样式隔离

设计令牌

CSS 变量驱动，一键主题切换，可深度定制

高性能

原生 JS 实现，Gzip < 12KB，无虚拟 DOM 开销

快速开始

index.html

<!-- 1. 引入 CSS 变量 -->
<link rel="stylesheet" href="nova-ui.css">

<!-- 2. 引入 Web Components -->
<script type="module" src="nova-ui.js"></script>

<!-- 3. 使用组件 -->
<nova-button variant="primary">开始使用</nova-button>
<nova-badge status="success">已上线</nova-badge>
<nova-alert type="info" title="提示">欢迎使用 NOVA UI</nova-alert>

· Foundation ·

设计令牌

所有视觉属性通过 CSS 自定义属性管理，确保全局一致性。

颜色系统

--nova-accent

#7c5cfc

--nova-accent2

#fc5c7d

--nova-accent3

#5cfcb8

--nova-amber

#fcca5c

背景层级

--nova-bg

#0a0a0f

--nova-surface

#111118

--nova-surface2

#18181f

间距系统

4

8

12

16

20

24

32

40

48

64

· Foundation ·

字体排版

三种字体各司其职，构建清晰的信息层级。

Display Heading

Syne 800 · 56px · letter-spacing: -2px

Section Heading

Syne 700 · 36px

Body Large — 清晰的信息传达是好设计的根基

DM Sans 400 · 20px

Body — NOVA UI 是一套专业的深色主题组件库，提供完整的设计令牌和 Web Components 实现。每个组件都经过精心设计，确保视觉一致性和可访问性。

DM Sans 300 · 15px · muted

const nova = new NovaUI({ theme: 'dark', accent: '#7c5cfc' })

JetBrains Mono 400 · 13px · code

· Component ·

按钮 Button

交互的核心元素，支持多种语义变体与尺寸。

变体 Variants

Primary

Secondary

Outline

Ghost

Danger

Success

尺寸 Sizes

Small

Medium

Large

X-Large

状态 States

Loading

Disabled

With Icon

Rounded

HTML · nova-button

<!-- 变体 -->
<nova-button variant="primary">Primary</nova-button>
<nova-button variant="secondary">Secondary</nova-button>
<nova-button variant="outline">Outline</nova-button>
<nova-button variant="ghost">Ghost</nova-button>
<nova-button variant="danger">Danger</nova-button>

<!-- 尺寸 -->
<nova-button size="sm">Small</nova-button>
<nova-button size="lg">Large</nova-button>

<!-- 状态 -->
<nova-button loading>Loading...</nova-button>
<nova-button disabled>Disabled</nova-button>
<nova-button icon="⚡">With Icon</nova-button>
<nova-button rounded>Rounded</nova-button>

· Component ·

输入框 Input

表单输入组件，支持图标、前缀、验证状态。

HTML · nova-input

<nova-input label="用户名" placeholder="请输入用户名"></nova-input>
<nova-input label="邮箱" type="email" icon="✉"></nova-input>
<nova-input label="密码" type="password"></nova-input>

<!-- 验证状态 -->
<nova-input status="success" hint="用户名可用"></nova-input>
<nova-input status="error" hint="格式有误"></nova-input>

<!-- 多行 -->
<nova-input multiline rows="4" label="备注"></nova-input>

· Component ·

徽章 Badge

状态标识与标签，传达简短的语义信息。

状态徽章

Default

Primary

Success

Warning

Error

Info

带点徽章 · 计数

在线

忙碌

离线

通知

消息

Outline

HTML · nova-badge

<nova-badge status="success">Success</nova-badge>
<nova-badge status="warning">Warning</nova-badge>
<nova-badge status="error">Error</nova-badge>

<!-- 带点指示 -->
<nova-badge dot status="success">在线</nova-badge>

<!-- 数字计数 -->
<nova-badge count="99+">消息</nova-badge>

<!-- 轮廓样式 -->
<nova-badge outline status="primary">Outline</nova-badge>

· Component ·

卡片 Card

内容容器，支持标题栏、覆盖图、交互效果。

基础卡片

Active

这是一个标准卡片，包含标题栏和内容区域。适用于信息展示、数据摘要等场景。

可悬停卡片

Nova Project

前端组件库

React

TypeScript

更新于 2 小时前

查看详情 →

🚀

渐变卡片

使用 variant="gradient" 属性

统计卡片

12.4K

月活用户

98.2%

满意度

234

组件数量

4.9★

评分

HTML · nova-card

<!-- 基础卡片 -->
<nova-card>
  <div slot="header">标题</div>
  <div slot="body">内容区域</div>
  <div slot="footer">底部操作</div>
</nova-card>

<!-- 可悬停 -->
<nova-card hoverable>...</nova-card>

<!-- 变体 -->
<nova-card variant="gradient">...</nova-card>
<nova-card variant="bordered">...</nova-card>

· Component ·

提示 Alert

内联提示信息，传达系统状态与操作反馈。

这是一条信息提示，用于展示常规说明或引导内容。

您的更改已保存，数据将在几秒内同步到所有设备。

您的存储空间已使用 85%，请及时清理或升级套餐。

网络连接超时，请检查网络设置后重试。错误码: NET_ERR_TIMEOUT

这条提示可以被关闭。点击右侧 × 按钮关闭。

HTML · nova-alert

<nova-alert type="info" title="提示">信息内容</nova-alert>
<nova-alert type="success" title="成功">操作成功</nova-alert>
<nova-alert type="warning" title="警告">注意事项</nova-alert>
<nova-alert type="error" title="错误">操作失败</nova-alert>

<!-- 可关闭 -->
<nova-alert type="info" closable>可关闭提示</nova-alert>

· Component ·

弹窗 Modal

模态对话框，用于需要用户确认或填写信息的场景。

打开基础弹窗

确认对话框

表单弹窗

HTML · nova-modal

<nova-button onclick="modal.setAttribute('open','')">打开</nova-button>

<nova-modal id="modal" title="弹窗标题" size="md">
  <div slot="body">弹窗内容</div>
  <div slot="footer">
    <nova-button variant="ghost" onclick="modal.removeAttribute('open')">取消</nova-button>
    <nova-button variant="primary">确认</nova-button>
  </div>
</nova-modal>

<!-- 尺寸: sm | md | lg | xl -->

· Component ·

进度 Progress

线性和环形进度指示器。

环形进度

HTML · nova-progress

<!-- 线形 -->
<nova-progress value="75" label="存储"></nova-progress>
<nova-progress value="45" color="warning"></nova-progress>
<nova-progress value="30" animated striped></nova-progress>

<!-- 环形 -->
<nova-progress-circle value="72" label="完成率"></nova-progress-circle>
<nova-progress-circle value="88" color="success"></nova-progress-circle>

· Component ·

开关 Toggle

切换开关与复选框，用于布尔值选项设置。

复选框

HTML · nova-toggle / nova-checkbox

<nova-toggle label="启用通知" checked></nova-toggle>
<nova-toggle label="深色模式" color="success"></nova-toggle>
<nova-toggle label="已禁用" disabled></nova-toggle>
<nova-toggle label="小尺寸" size="sm"></nova-toggle>

<nova-checkbox label="同意协议" checked></nova-checkbox>

· Component ·

头像 Avatar

用户头像组件，支持图片、文字缩写、状态指示。

尺寸

状态与样式

头像组

HTML · nova-avatar

<nova-avatar name="Alice Wang" size="lg" status="online"></nova-avatar>
<nova-avatar name="Bob Chen" color="#fc5c7d" shape="square"></nova-avatar>

<!-- 头像组 -->
<nova-avatar-group max="4">
  <nova-avatar name="Alice Wang"></nova-avatar>
  <nova-avatar name="Bob Chen"></nova-avatar>
  <nova-avatar name="Carol Li"></nova-avatar>
</nova-avatar-group>

· Component ·

通知 Toast

浮动通知消息，自动消失，支持队列管理。

成功通知

信息通知

警告通知

错误通知

持久通知

JavaScript · NovaToast

// 显示通知
NovaToast.show('操作成功！', 'success');
NovaToast.show('注意查看', 'warning');
NovaToast.show('操作失败', 'error');
NovaToast.show('提示信息', 'info');

// 持久通知 (duration = 0)
NovaToast.show('需要手动关闭', 'info', 0);

// 自定义持续时间 (ms)
NovaToast.show('3秒后消失', 'success', 3000);

· Component ·

表格 Table

数据表格，支持排序、斑马纹、hover 高亮。

姓名	角色	状态	加入时间	操作
Alice Wang	管理员	在线	2024-01-15	编辑删除
Bob Chen	开发者	忙碌	2024-03-22	编辑删除
Carol Li	设计师	离线	2024-06-08	编辑删除

HTML · nova-table

<nova-table striped hoverable>
  <div slot="table">
    <table>
      <thead>
        <tr>
          <th class="nova-th">姓名</th>
          <th class="nova-th">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr class="nova-tr">
          <td class="nova-td">Alice</td>
          <td class="nova-td"><nova-badge dot status="success">在线</nova-badge></td>
        </tr>
      </tbody>
    </table>
  </div>
</nova-table>

· Component ·

加载 Loader

加载状态指示器，多种样式满足不同场景需求。

旋转加载

骨架屏

卡片骨架

HTML · nova-loader / nova-skeleton

<!-- 加载器 -->
<nova-loader size="sm"></nova-loader>
<nova-loader size="lg" color="success"></nova-loader>

<!-- 骨架屏 -->
<nova-skeleton lines="3"></nova-skeleton>
<nova-skeleton width="48px" height="48px" radius="12px"></nova-skeleton>

目录导航

UI 主题设计

预览结果：