# eglador-ui-react 中文文档

规范地址：https://npmcn.com/package/eglador-ui-react/

版本：1\.0\.0-alpha\.21
npm 元数据更新时间：2026-11-03T12:44:37.958Z
中文译文更新时间：2026-11-03T13:47:22.629Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/eglador-ui-react
原文对照：https://npmcn.com/package/eglador-ui-react/?lang=original
项目主页：https://github.com/eglador/eglador-ui-react#readme
源码仓库：https://github.com/eglador/eglador-ui-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：822 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，tailwindcss ^4\.0\.0
- 首次发布：2026-03-28T15:15:58.571Z
- 最新版本发布：2026-11-03T12:44:37.799Z
- 已发布版本数：40（近 12 个月 40 个）

## 中文简介

用于React的Eglador UI -无头，可访问的组件库。复合子组件，Tailwind v4，零运行时依赖项。

## 安装

```sh
npm install eglador-ui-react
```

也可以使用：`pnpm add eglador-ui-react`、`yarn add eglador-ui-react`、`bun add eglador-ui-react`

## README

![eglador-ui-react](https://npmcn.com/package/eglador-ui-react/.github/eglador-logo.svg)

# eglador-ui-react

[![npm version](https://img.shields.io/npm/v/eglador-ui-react?style=flat-square&color=blue)](https://www.npmjs.com/package/eglador-ui-react) [![npm downloads](https://img.shields.io/npm/dm/eglador-ui-react?style=flat-square&color=green)](https://www.npmjs.com/package/eglador-ui-react) [![license](https://img.shields.io/npm/l/eglador-ui-react?style=flat-square)](https://github.com/eglador/eglador-ui-react/blob/main/LICENSE) ![zero runtime deps](https://img.shields.io/badge/zero%20deps-runtime-22C55E?style=flat-square) ![tailwind v4](https://img.shields.io/badge/tailwindcss-v4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white) ![react 19](https://img.shields.io/badge/react-19-61DAFB?style=flat-square&logo=react&logoColor=white) ![typescript](https://img.shields.io/badge/typescript-ready-3178C6?style=flat-square&logo=typescript&logoColor=white)

用于React的Eglador UI -无头，可访问的组件库。复合子组件, **顺风CSS v4**零运行时依赖。

> **状态:** Alpha - 65/65组件出货。

## 安装

```bash
npm install eglador-ui-react
```

**同行依赖性:** `react ^19` · `react-dom ^19` · `tailwindcss ^4`

## 设置

```css
/* app/globals.css */
@import "tailwindcss";
@source "../node_modules/eglador-ui-react";
```

| 框架 | CSS文件位置 | 路径 |
| --- | --- | --- |
| Next.js（应用路由器） | `app/globals.css` | `../node_modules/eglador-ui-react` |
| Next.js (`src/`） | `src/app/globals.css` | `../../node_modules/eglador-ui-react` |
| 轻快地 | `src/index.css` | `../node_modules/eglador-ui-react` |

## 约定

所有组件共享相同的词汇表：

-   **变体** (视觉层级): `solid` · `soft` · `outline` · `ghost` · `link`
-   **大小**： `xs` · `sm` · `md` · `lg` · `xl`
-   **形状**： `square` · `rounded` · `pill` · `circle`
-   **调色板**：纯锌（无配色方案；主题单独处理）
-   **A11y**：原生HTML输入； `aria-*` 属性，对焦可见环，rtl安全的顺风逻辑属性

### z - index层次结构

Baslangic 1000+ - tuketici uygulamasintipik `z-10 / z-20 / z-50` Z-index （Z-index）与x -index （x -index）对齐，x -index （x -index）对齐。

| 层 | z - index | 组件 |
| --- | --- | --- |
| 模态 | `z-[1000]` | 对话框，AlertDialog，抽屉，侧边栏（移动） |
| 浮动弹出 | `z-[1100]` | 弹出窗口，组合框，选择，多选，颜色选择器，下拉菜单，上下文菜单，菜单栏，HoverCard，导航菜单 |
| 工具提示 | `z-[1200]` | 工具提示 |
| 通知 | `z-[1300]` | 通知 |

## 组件(65/65)

**布局和结构（7/7）** ✓手风琴式·✓光圈式·✓可折叠式·✓可调整大小·✓滚动区·✓分隔符·✓侧边栏

**显示(8/8)** ✓头像·✓徽章·✓卡牌·✓空·✓Kbd·✓骷髅·✓转轮·✓排版

**导航(7/7)** ✓面包屑·✓菜单栏·✓导航菜单·✓分页·✓步进器·✓标签页·✓树视图

**形式(24/24)** ✓按钮·✓按钮组·✓复选框·✓CheckboxGroup·✓颜色选取器·✓组合框·✓下拉区·✓表单·✓输入·✓InputGroup·✓InputOTP·✓InputTag·✓标签·✓MultiSelect·✓native elect·NumberInput·✓Radio·✓RadioGroup·✓选择·✓滑块·✓开关·文本区·✓切换·切换组·切换组

**日期和时间（3/3）** ✓日历·日期拾取器·日期时间拾取器

**覆盖(10/10)** ✓警报·✓AlertDialog·✓上下文菜单·✓对话框·✓抽屉·✓下拉菜单·✓悬浮卡·✓通知·✓弹出窗口·✓工具提示

**数据(1/1)** -餐桌

**Misc (5/5)** -✓命令·✓图像处理·✓链接·✓进度·✓快速拨号

## 兼容性

适用于任何基于react的框架： **Next.js 16 +**， **混音**， **Vite + React**， **盖茨比**。

组件被标记 `"use client"`． 将它们放在客户端组件中或控件之后 `"use client"` 指令。

## 发展

```bash
npm install
npm run dev               # tsup watch mode
npm run build             # production build to dist/
npm run typecheck         # tsc --noEmit
npm run storybook         # Storybook dev (http://localhost:6006)
npm run build-storybook   # static Storybook export
```

## 出版

通过GitHub Actions自动发布。当一个GitHub发布被创建时，包被发布到npm。

1.  更新 `version` 在 `package.json`
2.  提交和推送
3.  创建一个带有匹配标签的GitHub发布(例如： `v1.0.0`）

## 作者

凯南Gündoğan - [https://github.com/kenangundogan](https://github.com/kenangundogan)

维护下 [Eglador](https://github.com/eglador)

## 许可证

麻省理工学院

## 常见问题

### eglador-ui-react 是什么？

用于React的Eglador UI -无头，可访问的组件库。复合子组件，Tailwind v4，零运行时依赖项。

### 如何安装 eglador-ui-react？

在项目目录运行 npm install eglador-ui-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、tailwindcss（^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### eglador-ui-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### eglador-ui-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### eglador-ui-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### eglador-ui-react 可以商用吗？

eglador-ui-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### eglador-ui-react 还在维护吗？

最新版本 1\.0\.0-alpha\.21 发布于 2026/11/03（今天）；至今共发布 40 个版本，其中过去 12 个月发布了 40 个；首次发布于 2026/03/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。