Library primitives 无样式可访问React组件原语库

一、项目介绍

做设计系统最尴尬的处境之一，是既要保证无障碍（键盘导航、ARIA、焦点管理），又希望样式完全自己掌控。很多现成组件库把样式和交互逻辑焊死，想改品牌风格就得和默认样式反复搏斗。
Radix Primitives 选择了另一条路：它只提供行为正确的无样式组件原语，对话框、下拉、弹出、标签页、开关等，所有交互、可达性、键盘支持都帮你处理好，但外观完全交给你。配合任意 CSS 方案或 Tailwind，你能搭出既合规又独特的设计系统。

二、项目基本信息

三、核心优势

• 无障碍优先：键盘交互、ARIA、焦点陷阱等内置且经过验证
• 完全无样式：不绑定任何 CSS 方案，视觉由你定义
• 组合式 API：每个原语职责单一，便于按需拼装
• 行为稳健：处理了大量边界情况（点击外部关闭、滚动锁定等）
• 与主流框架兼容：React 生态，可配合 Tailwind 等

四、适用场景

适合正在自研设计系统、组件库的团队，以及希望对每个组件外观拥有完全控制权的产品。若想开箱即用的美观组件，可选用基于 Radix 的上层库。

五、安装教程

当前最新版本 latest。按下方命令安装（如遇网络问题可切换镜像源）：

npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu

常见报错：依赖缺失时先升级运行环境（如 Node、Python、.NET、JDK）到项目要求版本；网络超时多为镜像或代理问题，可重试或换源。

六、使用示例

下面是一段可直接运行或参考的真实示例：

import * as Dialog from '@radix-ui/react-dialog';

export function Confirm() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>打开</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay style={{ background: 'rgba(0,0,0,.5)' }} />
        <Dialog.Content>
          <Dialog.Title>确认</Dialog.Title>
          <Dialog.Description>确定要执行吗？</Dialog.Description>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

七、常见问题

问：Radix 和 shadcn/ui 是什么关系？答：shadcn/ui 等上层库正是基于 Radix 原语加 Tailwind 封装而成，你也可以直接用 Radix 自建。问：需要写很多 CSS 吗？答：是的，原语不带样式，外观需自行实现，这正是它灵活的原因。

八、总结

primitives 用一个清晰的设计，把把基础能力做成好用的组件这件事从重复劳动变成了可复用、可维护的工程能力。它不追求大而全，而是把核心痛点解决得足够扎实，这正是日常开发与团队落地时最需要的那种工具。如果你也在被同类问题困扰，不妨按上面的安装与使用步骤试一试，把它接进自己的工作流。