v0.0.1 • MIT License

HaloLight UI

现代化跨框架 Web Components 组件库
基于 Stencil 构建，采用 OKLch 色彩空间，支持 React、Vue、Angular 等所有框架

🚀 查看文档

📦 组件展示

💻 完整示例

⭐ GitHub

生产级组件库

7

核心组件

100%

TypeScript

∞

跨框架兼容

OKLch

现代色彩空间

核心特性

🚀

跨框架兼容

基于 Web Components 标准，可在 React、Vue、Angular、Svelte 等任何框架中无缝使用

🎨

OKLch 色彩系统

采用感知均匀的 OKLch 色彩空间，提供一致的亮度、可预测的饱和度和更宽广的色域

🌓

深色模式

内置完善的主题系统，支持亮色/暗色模式切换，提供优雅的视觉体验

🎯

完整 TypeScript

100% TypeScript 编写，提供完整的类型定义和智能提示

♿

无障碍访问

遵循 ARIA 规范，确保所有用户都能访问和使用组件

📦

Tree-Shakeable

支持按需导入，只打包使用的组件，优化包体积

🔧

高度可定制

通过 CSS 变量轻松定制主题，支持自定义颜色、间距等

⚡

高性能

Shadow DOM 封装，样式隔离，懒加载支持，确保最佳性能

组件展示

按钮 (Button)

8 种变体 • 3 种尺寸 • 加载和禁用状态

Primary

Secondary

Success

Danger

Warning

Info

Outline

Ghost

Small

Medium

Large

Disabled

输入框 (Input)

多种类型 • 验证状态 • 错误提示

选择器 (Select)

自定义下拉 • 键盘导航 • 分组选项

卡片 (Card)

4 种变体 • 插槽支持 • 悬停效果

这是默认样式的卡片组件，适合大多数场景使用。

带有明显边框的卡片样式，层次分明。

具有立体阴影效果的卡片，更具层次感。

模态框 (Modal)

5 种尺寸 • 背景点击关闭 • 键盘快捷键 • 焦点锁定

表格 (Table)

行选择 • 排序 • 多种变体 • 响应式

快速开始

安装

npm install @halolight/ui

在 Vanilla JS 中使用

        <script type="module">
  import { defineCustomElements } from '@halolight/ui/loader';
  defineCustomElements();
</script>

<hl-button variant="primary">点击我</hl-button>
      

在 React 中使用

        import { defineCustomElements } from '@halolight/ui/loader';

defineCustomElements();

function App() {
  return <hl-button variant="primary">点击我</hl-button>;
}
      

在 Vue 中使用

        <template>
  <hl-button variant="primary">点击我</hl-button>
</template>

<script setup>
import { defineCustomElements } from '@halolight/ui/loader';
defineCustomElements();
</script>
      