eglador-ui-react
用于React的Eglador UI -无头，可访问的组件库。复合子组件, 顺风CSS v4零运行时依赖。
状态: Alpha - 65/65组件出货。
安装
npm install eglador-ui-react
同行依赖性: react ^19 · react-dom ^19 · tailwindcss ^4
设置
/* 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" 指令。
发展
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。
- 更新
version在package.json - 提交和推送
- 创建一个带有匹配标签的GitHub发布(例如：
v1.0.0）
作者
凯南Gündoğan - https://github.com/kenangundogan
维护下 Eglador
许可证
麻省理工学院