我构建了一个零依赖的 CSS 库，内置 9 种主题——原因如下
Source: Dev.to
我今年在构建第十个着陆页。
相同的流程：打开一个新项目，复制上一个项目的按钮样式，粘贴卡片 CSS，微调颜色，与 Bootstrap 那些固执的默认设置斗争，或者花 40 分钟配置 Tailwind 只为得到一个居中的 hero 区块。
某个时刻，我问自己：
为什么我没有一个可以直接放入任何项目并立即开始构建的单文件？
这个问题演变成了六个月的工作。结果是 njX UI —— 一个专为着陆页打造的纯‑CSS 组件库。
现有选项的问题
我不想再构建另一个库。我真的尝试过使用已有的：
| 库 | 优点 | 缺点 |
|---|---|---|
| Bootstrap | 非常适合仪表盘和管理后台。 | 较大（约 200 KB），风格固定，除非进行大量自定义，否则所有站点看起来都一样。 |
| Tailwind CSS | 极其灵活，我真的很喜欢。 | 需要构建步骤、PostCSS、配置文件，而且你最终会在 HTML 中编写 CSS——对快速着陆页来说负担较重。 |
| shadcn/ui、Radix 等 | 功能强大的组件集合。 | 需要 React（或其他框架）。并非总是可行的选项。 |
我真正想要的
- 一个
<link>标签，完成。 - 开箱即用、外观良好的预构建组件。
- 多种主题，可通过单一属性切换。
- 纯 HTML —— 无需框架、无构建步骤、无需 npm。
于是我自己做了。
什么是 njX UI？
njX UI 是一个 约 40 KB 压缩 的 CSS 组件库，拥有 25+ 个组件 和 9 种内置配色主题。
在页面中引入
使用组件
Get Started
Learn More就是这样。无需配置、无需构建步骤、样式不需要 JavaScript。
9 种主题，一个属性
库中的每一种颜色都是一个 CSS 自定义属性（custom‑property）标记。切换主题实际上只需要更改一个 HTML 属性：
可用主题： dark、light、red、blue、green、cyan、yellow、pink、purple。
所有组件——按钮、卡片、表单、通知等——都会自动更新。
实时演示： 点击顶部栏的颜色点即可查看全部 9 种主题。
包含内容
25+ 组件
| 类别 | 组件 |
|---|---|
| 布局 | Sections, Hero, Grid, Container |
| UI | Buttons (50+ variants), Cards, Badges, Tags |
| 表单 | Input, Select, Checkbox, Radio, Switch |
| 反馈 | Notifications, Toast, Modals, Popups |
| 导航 | Tabs, Sidebar/Drawer (6 variants) |
| 数据 | Tables, Skeleton loaders |
| 特效 | 15+ CSS animations, 40+ hover effects |
| 渐变 | 50+ gradient classes (bg, text, border, animated) |
内置实用工具
- 12 种字体预设的排版比例。
- 间距系统。
- 所有语义状态的颜色标记（
primary、accent、success、error、warning）。 - 开箱即用的暗/亮模式。
实际使用：5 分钟内完成英雄区
New · v1.0.7
Build landing pages
10x faster
Zero dependencies. One link tag. 25+ components, 9 themes,
full CSS variable control.
Get Started
View Docs →
更改 <html> 上的 data-theme 属性即可立即重新着色整个页面。
可选主题切换器（≈10 行原生 JavaScript）
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('njx-theme', theme);
}
// Restore saved theme on page load
const saved = localStorage.getItem('njx-theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);无库、无框架、无需构建步骤——仅十行纯 JavaScript。
按钮 — 因为每个项目都需要按钮
按钮集合是最完整的板块之一：50+ 变体，范围从 btn-xs 到 btn-2xl，实心 / 轮廓 / 幽灵 / 渐变 / 发光 / 动画 / 图标 / 组合 / 加载状态。所有这些都只需一个类即可控制。
动画与悬停效果
40+ 悬停效果和 15+ CSS 动画 — 全部为单类实用工具，无需 JavaScript：
lifts on hover
glows on hover
3D tilt on hover
floating animation
pulsing animation
shimmer animation如何安装
通过 CDN（无需安装）
只需添加 <link> 标签，即可开始使用这些类。
njX UI – 让您以 10× 更快速度构建登陆页面的“即插即用”CSS库。
通过 npm
npm install njx-ui当前状态与下一步
该库已更新至 v1.0.7，并持续活跃开发。
已稳定
- 所有 25+ 组件
- 完整的 9 主题系统
- 带有 6 种变体的 Sidebar/Drawer 以及完整的 JS API
- 动画和悬停工具
即将推出
- 暗/亮模式切换组件（已在文档中）
- 更多布局原语
- 带搜索功能的更佳文档
为什么开源
- 我被迫保持代码整洁并有文档
- 其他开发者可以捕捉我遗漏的错误
- 如果它能帮助某人第十一次省去重新编写同一个按钮的工作，那就值得
链接
🚀 Live demo:
★ GitHub:
📦 npm:
- 📖 Docs: 完整的组件参考位于上面的在线演示链接
非常期待听到你的想法——尤其是如果你在项目中尝试过的话。你希望接下来添加哪个组件？