# @eldrajs/ui 中文文档

规范地址：https://npmcn.com/package/%40eldrajs/ui/

版本：0\.3\.6
npm 元数据更新时间：2026-11-12T14:18:48.788Z
中文译文更新时间：2026-11-13T13:05:20.976Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40eldrajs/ui
原文对照：https://npmcn.com/package/%40eldrajs/ui/?lang=original
项目主页：https://github.com/eldra-is/headless-kit/tree/main/packages/ui#readme
源码仓库：https://github.com/eldra-is/headless-kit

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

- 包体积（解压后）：4.9 MB，755 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：3 个
- peer 依赖：vue ^3\.5\.0，vue-i18n ^11\.0\.0，vee-validate ^4\.12\.0
- 首次发布：2026-10-17T15:18:41.133Z
- 最新版本发布：2026-11-12T14:18:48.292Z
- 近 30 天下载量：3656（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）

## 中文简介

Eldra storefronts的可访问 Vue 3 核心组件:按钮,窗体,选择,卡片,覆盖和导航,它们通过CSS设计符来进行.

## 安装

```sh
npm install @eldrajs/ui
```

也可以使用：`pnpm add @eldrajs/ui`、`yarn add @eldrajs/ui`、`bun add @eldrajs/ui`

## README

# `@eldrajs/ui`

为Eldra storefronts提供可访问的Vue 3核心组件,通过CSS设计符来进行.

这些组件是用来建造的 [`eldra-starter-spec/01-core-components.md`](https://npmcn.com/package/eldra-starter-spec/01-core-components.md) (世界水大会) 页:1 计划1——基础、行动和形式`Button`编号 :`ButtonGroup`, (中文(简体) ), `Link`, (中文(简体) ), `Input`, (中文(简体) ), `Textarea`, (中文(简体) ), `FieldWrapper`, (中文(简体) ), `FormLayout`, (中文(简体) ), `Checkbox`编号 :`CheckboxGroup`, (中文(简体) ), `Radio`编号 :`RadioGroup`, (中文(简体) ), `Switch`, (中文(简体) ), `Select`编号 :`MultiSelect`, (中文(简体) ), `QuantityStepper`, (中文(简体) ), `VariantPicker`, (中文(简体) ), `SearchBar`)——完成,加 `UnitInput` 财务报告和审定财务报表 `CurrencyInput`,光谱没有等同;显示、商业、布局、覆盖、导航 和反馈组成部分在以下两个次级项目中着陆,在同一交付顺序中 spec's"组件与交付顺序"一栏列出. 这个包裹是做什么的 未列出名称 [光谱以外的添加](https://npmcn.com/package/%40eldrajs/ui/#readme-additions-beyond-the-spec)当它离开一个财产表时 记录在 [绕行](https://npmcn.com/package/%40eldrajs/ui/#readme-deviations) 读者也找不到.

## 安装

```bash
pnpm add @eldrajs/ui vue
```

端点 : **`vue ^3.5`**。地板是3.5,而不是3.4: 每个控制器的ID来自 `useId()`,哪个 Vue 在3.5中添加, 因此在3.4 上安装成功 和第一个挂载投掷的控制 `useId is not a function`。 。 。 . `vee-validate ^4.12` 是一个 **选项** 对等点——只有 `./vee-validate` 输入需要它,而包里没有其他东西可以导入它.

## 样式

组件来了 **预建**: 一个应用程序从不编译此软件包的样式, 不需要 Tailwind 使用它们 组件的每个类别是: `eldra:`\- 前缀(`eldra:px-4`, (中文(简体) ), `eldra:hover:bg-primary`),由Tailwind所编译 `prefix(eldra)`,每个主题变量 读作 `--eldra-*`。软件包的 CSS 中没有使用应用程序本身的 Tailwind 构建用途的名称,所以 两人从未重塑对方的标记.

5艘CSS入列舰. 从同一个开始 `--eldra-*` 变量,所以没有变化 ,只有不同的传送形状.

-   **`@eldrajs/ui/style.css`** ——道具,泰尔温德的飞行前和每个组件的风格,为: 使用此软件包构建的页面 :
    
    ```css
    @import '@eldrajs/ui/style.css';
    ```
    
-   **`@eldrajs/ui/components.css`** —— 说 `style.css` 没有泰风的飞行前, 对于一个有 其样式表(或自有的 Tailwind)并添加组件:
    
    ```css
    @import '@eldrajs/ui/components.css';
    ```
    
    飞行前是重置 **全页**数字 : `style.css` 设置 `h1`– 说吧 –`h6` 到周围 大小和重量,每 `ul`编号 :`ol` 没有子弹,没有缩进,每一个 `a` 向周围颜色 无下划线,每 `p` 并走向无边际,以及 `button` 没有边界或填充. 它坐在这里 `@layer base`,所以一个网站自己的规则 仍然赢得存在的地方, 但任何网站 被放入浏览器——CMS中最常有的丰富的文本——会失去它的默认. `components.css` 带有相同的主题和相同的公用事业,字节表示字节,并将重置缩小为 组件自成一体,所以网站本身的元素保留了浏览器 默认和任何传递到组件槽中的东西都保持了网站的造型. 使用 `style.css` 当页面从此软件包构建时; 使用 `components.css` 当页面是网站自己的. `src/styles/__tests__/componentsCss.browser.spec.ts` 将每个组成家庭置于两者之下, 覆盖打开,需要相同的像素.
    
-   **`@eldrajs/ui/tokens.css`** - 那个 `--eldra-*` 变量(颜色、弧度、间隔、类型、, 动作,z指数, 和一个不透明—— `--eldra-revalidating-opacity`),在 `:root` 与 光谱默认值,加a `@media (prefers-reduced-motion: reduce)` 规则为零 持续时间变量.
    
-   **`@eldrajs/ui/tailwind.css`** 对于一个运行 Tailwind v4 并想要它的应用程序 **拥有** 标记 在同一设计符号上: `tokens.css`,然后是一个 `@theme` 块映射 Tailwind 的命名空间 在这些变量上(`--color-primary: var(--eldra-color-primary)`, (中文(简体) ), `--radius-md`, (中文(简体) ), `--font-heading`, (中文(简体) ), `--spacing-*`, (中文(简体) ), `--shadow-*`, (中文(简体) ), `--ease-*`)和包的自定义公用事业 (控制高地,即 `eldra-focus` 环,类型样式,运动和地层公用事业). 它会建立 没有组件; 导入旁边的预建组件 . `theme.css` (单位:千美元) `@theme` 块)和 `utilities.css` (公用设施) 船自己也.
    
    ```css
    @import 'tailwindcss';
    @import '@eldrajs/ui/tailwind.css';
    @import '@eldrajs/ui/components.css';
    ```
    
    类型样式( E)`text-body`, (中文(简体) ), `text-h2`.) 设置长手,从不 `font` ,并读 它们的重量 `var(--tw-font-weight, <token>)`,宣言Tailwind为自己写作 `--text-*--font-weight`因此,一个 `font-medium`编号 :`font-semibold` 一个赢一个赢一个赢一个 编译为 `tabular-nums` 除了一个 不再重置。 基础层 `@apply font-*` 套装 `--tw-font-weight` 因此,它在同一元素上达到类型样式. 线高和跟踪是普通的长手 故意:启动者自己的基础规则 (单位:千美元)`h1`– 说吧 –`h4` `@apply leading-[1.1] tracking-tight`) 否则将覆盖每个标题的类型 样式.
    

### 超越组件的类

组件的风格坐在那里 `@layer components`在尾风下方 `@layer utilities`两者 `style.css` 财务报告和审定财务报表 `components.css` 宣布标准顺序( e)`properties, theme, base, components, utilities`),所以它先持有任意样式表负载. 一个你设置的课 组件,与 `class` (其最外层元素)或 `classes` (其中的一个元素),不是前缀和 被添加到组件本身的类中;它逐层取胜,而不论其具体性如何. 没什么 运行时合并或去除: 组件绑定其类 平原 Vue 方式, 每类一个 对每个要素的关切.

```vue
<Button class="px-8">Checkout</Button>
<!-- renders class="eldra:control-h eldra:px-4.5 … px-8": px-8 wins -->
```

-   它在每一个州都获胜: 一个平地 `bg-red-600` 编号 `Button` 替换其盘旋和活性填充 因为公用设施级规则比任何组件级规则都要好 写你想要的状态 (单位:千美元)`bg-red-600 hover:bg-red-700`) (中文(简体) ).
-   您的应用程序本身的 Tailwind 必须生成该类( 它在您的源头, 所以它是的) 。 没有 你自己的尾风,你的任何CSS 没有层次,或者在之后宣布的一层 `components` 以同样的方式获胜.

### 这个 `data-eldra-ui` 标记

每一个部件的最外层元素都携带着 `data-eldra-ui`,每个元素都有一个组件 制作外部: a `Select` 或者说 `MultiSelect` 面板,a `SearchBar` 结果面板,a `Popover` 面板,a `Tooltip` 气泡和烟雾 `Toaster` 区域,每个电传输出出其组成部分. `components.css`重置完全达到这些元素和 `data-part` 里面的元素, `:where([data-eldra-ui], [data-eldra-ui] [data-part])`,在零特异性. `data-part` 独自一人 还不够,因为不是这个软件包的名字:一个站点自己的 `<h2 data-part="title">`,或任何 Ark UI 或 Zag 组件( 设置 `data-part` 保留浏览器 默认值。 属性是公开和稳定的,所以一个站点也可以用作钩子 (单位:千美元)`a:not([data-eldra-ui], [data-eldra-ui] *)` 将网站的全球链接排除在 页:1 其中一个案件仍然在范围之内:一个自有要素 `data-part` 地点 传入组件的槽( Ark UI 部件在 a 内) `Dialog`说)是一个 `data-part` 元素 在一个标记的根内,所以它也得到重置.

一个网站 **无层** 元素规则击败包的分层规则,无论具体性如何: a 全球 `a { color: … }` 或者说 `button { font: … }` 重塑组件内部的元素. 此类规则的范围`.prose a`或把它们放在一层.

### 他们正在树下

`provideEldraScope(name)`,在 `setup()` 或应用根,使每个 其下组件 `data-eldra-scope="<name>"` 它的根部和每一个部位的传送 (小板,泡泡,对话,土司) `--eldra-*` 可对这些组件设置变量 仅电传部件包括:

```css
[data-eldra-scope='studio'] {
  --eldra-color-primary: #0b5cad;
}
```

每个元素持有槽内容 您通过 也携带 `data-eldra-slot` 联合国 `Button`是因为 标签, a `Dialog`标题、身体和脚印,a `Popover` 面板...),当槽有内容时 永远不要为背负, 作为你自己的CSS的钩子.

## 字体

类型符号的默认值是 `--eldra-font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif` 财务报告和审定财务报表 `--eldra-font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif`。软件包也不装入 字体 - 它只命名它们 - 所以一个消费者 要么装入 Bricolage Grotesque 和仪器 sans 本身(自主办,或谷歌字体) `<link>`编号 :`@import`)或覆盖 `--eldra-font-heading` 财务报告和审定财务报表 `--eldra-font-body` 他们自己的堆栈。 在其中一种或另一种发生之前,文字在 倒背系统堆栈,这是可以辨识的,但不是光谱的预定外观.

## 自定义

每个组件都支持这五个部分;没有一个硬码是商店想要更改的.

1.  **托肯丝.** 每个颜色、半径、高度、相距步骤、字体、持续时间、放松和z-index a 组件使用解析到 a `--eldra-*` 变量从 [样式](https://npmcn.com/package/%40eldrajs/ui/#readme-styles) 上方——设置在任意 祖先(通常为 `:root`和每个读它后. **`:root` 而不是一个 包装**对于弹出面板: `Select`, (中文(简体) ), `MultiSelect` 财务报告和审定财务报表 `SearchBar` 让他们通过 `<Teleport>` 改为 `body` (见 [层层](https://npmcn.com/package/%40eldrajs/ui/#readme-layering)因此,一个变量集在一个 `<div>` 环绕 控制不再是面板的祖先,也不再由其继承.
    
2.  **每个组件 CSS 变量**,在组件的自根上用出自符号声明 默认值,用于未共享设计符号的少数数值——大小没有专用 符号,特定组件角半径。 每一个都记录在部件上 故事本 docs 页面; 当前声明的变量 :
    
    | 构成部分 | CSS 变量 |
    | --- | --- |
    | `Accordion` | 没有 —— 顶端分割器是股票 `border-t`,无每个组件变量 |
    | `AccordionItem` | `--eldra-accordion-title-line` (默认) `1.4`)——标签的行比,无自有的表示 |
    | `Avatar` | `--eldra-avatar-initials-size-{sm,md,lg,xl}` (违约) `0.76rem`编号 :`0.95rem`编号 :`1.33rem`编号 :`2.28rem`,"直径的38%"——没有自己的标志", `--eldra-avatar-initials-tracking` (默认) `0.02em`, (中文(简体) ), `--eldra-avatar-icon-size-{sm,md,lg,xl}` (违约) `0.857rem`编号 :`1.071rem`编号 :`1.5rem`编号 :`2.571rem`,光谱本身的lg数按比例缩放到其他三个直径) |
    | `AvatarGroup` | 无 – 重叠和堆栈顺序为平面 Tailwind, 没有每个组件变量 |
    | `Badge` | `--eldra-badge-line-height` (默认) `1`)——徽章正文的行比,没有自有的标志 |
    | `Breadcrumb` | 无——倒塌阈值为 `--container-tablet` (单位:千美元)`Container`自己的48雷姆地沟断点,以及链接/椭圆盒再利用 `target-min`编号 :`eldra-link-radius`编号 :`radius-sm`,没有其自身的每个组件变量 |
    | `Button` | `--eldra-button-radius` (默认) `var(--eldra-radius-md)`, (中文(简体) ), `--eldra-button-border-width` (默认) `1px`身高不变, 和附着 `ButtonGroup` 与宽度相重叠, `--eldra-button-line-height` (默认) `1.2`, (中文(简体) ), `--eldra-button-font-size-lg` (默认) `1.0625rem`,一个按钮大小,没有它自己的类型标志) |
    | `ButtonGroup` | 无——只读第1层的共享符号 |
    | `Carousel` | `--eldra-carousel-per-view-base`编号 :`-md`编号 :`-lg` (作为铁道上的内线样式由 `carouselPerViewStyle`,解决为 `--eldra-carousel-per-view` 每个容器 -- -- 取自 `eldra-carousel-track` 工具,不默认它自己的——一个没有设置的幻灯片保持全宽)和 `--eldra-carousel-gap` (默认) `var(--eldra-space-4)`),两者均由 `eldra-carousel-slide` 工具宽度公式; `--eldra-carousel-dot-size` (默认) `0.5rem`和 `--eldra-carousel-dot-ring` (默认) `1.5px`,读作 `eldra-carousel-dot`· ; `--eldra-carousel-bleed` (默认) `0px`)——轨迹的内出水沟出血,作为自己的垫地,冲出去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去不去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去 `max()`\- 有焦点环的伸展,所以出血永远不花环 房间的轨道储备,通过它(设置每个断点) `classes.track`从来没有 `px-*`编号 :`-mx-*`编号 :`scroll-px-*` (b) 利用自己的工具——用这些工具取代该轴心上的保留,而不是用它来组成) |
    | `Checkbox` | `--eldra-checkbox-radius` (默认) `var(--eldra-radius-sm)`, (中文(简体) ), `--eldra-checkbox-border-width` (默认) `1.5px`, (中文(简体) ), `--eldra-checkbox-border-width-invalid` (默认) `2px`(中文(简体) ) |
    | `CheckboxGroup` | 无——只读第1层的共享符号 |
    | `Chip` | 无 —— 所选/填充为 `color-mix()` 超过共享 `--eldra-color-*` 符号,没有每个组件变量 |
    | `ChipGroup` | 无——只读第1层的共享符号 |
    | `Container` | 无 -- -- 沟道宽度`--eldra-gutter-{mobile,tablet,desktop}`)是共享符号,也读作 `Section`; 三限 `width` 值读取共享 `--eldra-container-{narrow,content,wide}` 直接、通过 `Container`属于自己的 `eldra-container-{narrow,content,wide}` 而不是尾风 `max-w-narrow`编号 :`-content`编号 :`-wide` - 见下文 " 绕道 " 条目 |
    | `ContentCard` | `--eldra-content-card-title-size` (默认) `1.25rem`和 `--eldra-content-card-title-line` (默认) `1.3`)——头衔自有大小和行比,无自有之相; `--eldra-content-card-excerpt-size` (默认) `0.9375rem`和 `--eldra-content-card-excerpt-line` (默认) `1.5`)——节选的自有大小和行比,由 `FeatureCard`是因为 `body` (单位:千美元)`text-content-card-excerpt` 内 `tailwind.css`),因为两者读作相同的谱号 |
    | `CurrencyInput` | `UnitInput`'正是(它使一个 `UnitInput` 与 `isCurrency` 总是在)——看 `UnitInput` 横行 |
    | `Dialog` | `--eldra-dialog-title-size` (默认) `1.25rem`, (中文(简体) ), `--eldra-dialog-title-line` (默认) `1.3`)——标题自有大小/行,无自有标志; `--eldra-dialog-width` (默认) `32rem`, (中文(简体) ), `--eldra-dialog-width-sm` (默认) `24rem`)——面板自有宽度,总是以对话框的相加宽度为上限(取景口更小) `2rem`(a) 公用事业本身内部; `--eldra-dialog-max-height` (默认) `none`:高高的面板会长出,对话框卷起像一页;设置以盖上面板并卷起里面的身体 `eldra-dialog-fullscreen` 功能将面板贴到取景口边缘,并用车体滚动到头部和脚部之间,供消费者在取景口变体下使用(`classes.panel: 'max-md:eldra-dialog-fullscreen'`(三); `--eldra-dialog-background` (默认) `var(--color-background)`, (中文(简体) ), `--eldra-dialog-border` (默认) `var(--color-border)`, (中文(简体) ), `--eldra-dialog-text` (默认) `var(--color-text)`关闭按钮的悬浮和按线, `--eldra-dialog-muted` (默认) `var(--color-muted)`,说明)和 `--eldra-dialog-backdrop` (默认) `var(--color-overlay)`)——染色体本身的颜色,仅由对话框的部分来读取,所以设置上 `<dialog>` (单位:千美元)`class`重新整理,而不重编时间档内容 `--eldra-color-*` 会有的 |
    | `Drawer` | `--eldra-drawer-title-size` (默认) `1.25rem`, (中文(简体) ), `--eldra-drawer-title-line` (默认) `1.3`)——标题自有大小/行,无自有符号(同编号 `Dialog`'',但是它自己的可变对; `--eldra-drawer-width` (默认) `28rem`)——面板自有最大宽度,在公用设施内部的取景口被封顶,也搭载了全屏-下-a-48rem-_视图_ 媒体查询; `--eldra-drawer-header-height` (默认) `4rem`)——标题行最不高,与 `--eldra-drawer-header-padding` (默认) `var(--eldra-space-4)`它的上下铺垫, `0px` 将行的内容集中在精确的高度上,例如站点头条; `--eldra-drawer-gutter` (默认) `1.5rem`)——头部,体部和脚部相并相并. 装置的安全区域( :`env(safe-area-inset-*)`因此,一个全屏抽屉可以清空一个音符,并在网页上显示主标 `viewport-fit=cover`· ; `--eldra-drawer-slide` (默认) `2rem`, (中文(简体) ), `--eldra-drawer-enter-duration` (默认) `400ms`, (中文(简体) ), `--eldra-drawer-exit-duration` (默认) `260ms`——面板滑出并淡出; `--eldra-drawer-swipe-threshold` (默认) `24px`(a) 在小组之后,一个侧面的刷子行走多远 `mobileSheet`, (中文(简体) ), `--eldra-drawer-sheet-gap` (默认) `3rem`, (中文(简体) ), `--eldra-drawer-sheet-radius` (默认) `var(--eldra-radius-xl)`和 `--eldra-drawer-handle-color` (默认) `var(--eldra-color-border-strong)`(中文(简体) ) |
    | `EditorPlaceholder` | `--eldra-editor-placeholder-border-width` (默认) `1.5px`——破损边界的宽度,区别于 `EmptyState`自己的股票 `border` (页x) |
    | `EmptyState` | `--eldra-empty-state-title-size` (默认) `1.25rem`和 `--eldra-empty-state-title-line` (默认) `1.3`)——头衔自有大小和行比,无自有象征 |
    | `FeatureCard` | 股份 `ContentCard`是因为 `--eldra-content-card-excerpt-size`编号 :`-line` 为其自身服务 `body` 文本( 文本 (`text-content-card-excerpt`页:1 `title` 读取 `text-h4` 直接, 没有自己的变量 |
    | `FieldWrapper` | `--eldra-field-note-line-height` (默认) `1.45`)——帮助和错误文本共享的行 |
    | `FilterPanel` | `--eldra-filter-subheading-tracking` (默认) `0.06em`,一个大小系统子标题的字母间隔——超线标志自0.12em将"SOCKS (EU)"推入了15rem侧边栏的两行中, `--eldra-filter-swatch-edge-width` (默认) `1px`和 `--eldra-filter-swatch-ring-width` (默认) `1.5px`对于一个彩色的表的边缘 和它得到的戒指 `--eldra-filter-histogram-bar-min` 编号 : `--eldra-filter-histogram-bar-radius` (违约) `2px` 编号 : `1px`)为一个直方图栏最小高度及其两个上角. 其他一切都是共同的象征,或来自它所组成的组件(`Checkbox`, (中文(简体) ), `Switch`, (中文(简体) ), `Chip`, (中文(简体) ), `Badge`, (中文(简体) ), `Input`, (中文(简体) ), `Button`, (中文(简体) ), `CurrencyInput`, (中文(简体) ), `RangeSlider`),各经自行而复行 |
    | `FormLayout` | `--eldra-form-summary-radius` (默认) `var(--eldra-radius-md)`)——状态摘要框的角半径 |
    | `Icon` | 无——只读第1层的共享符号 |
    | `Image` | `--eldra-image-hatch-gap` (默认) `0.75rem`)——直播"无影像"占位符的对角线重复距离 |
    | `Input` | `--eldra-input-radius` (默认) `var(--eldra-radius-md)`, (中文(简体) ), `--eldra-control-font-size` (默认) `0.9375rem`, (中文(简体) ), `--eldra-control-font-size-mobile` (默认) `1rem`, (中文(简体) ), `--eldra-control-line-height` (默认) `1.5rem`, (中文(简体) ), `--eldra-field-border-width` (默认) `1px`(中文(简体) ) |
    | `Lightbox` | 进口键框`eldra-lightbox-in`),而每个大小要么是共享符号,要么是字面成分特定类别(`px-16`, (中文(简体) ), `size-11`编号 :`max-md:size-11`),同"无专用变量"形状 `AvatarGroup`编号 :`ButtonGroup` |

## 常见问题

### @eldrajs/ui 是什么？

Eldra storefronts的可访问 Vue 3 核心组件:按钮,窗体,选择,卡片,覆盖和导航,它们通过CSS设计符来进行\.

### 如何安装 @eldrajs/ui？

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

### @eldrajs/ui 支持 TypeScript 吗？

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

### @eldrajs/ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @eldrajs/ui 需要什么版本的 Node\.js？

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

### @eldrajs/ui 可以商用吗？

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

### @eldrajs/ui 的下载量有多少？

根据 npm 官方下载统计，@eldrajs/ui 在 2026/10/14 – 2026/11/12 这 30 天内被下载 3,656 次，日均约 122 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eldrajs/ui 还在维护吗？

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

