Primer React

项目概述

Primer React 是 GitHub 官方设计系统（Primer Design System）在 React 领域的官方落地实现。它完整复刻了驱动 GitHub.com 网站运行的排版系统、色彩阶梯与核心交互组件库。

核心特性

• 纯正 GitHub 视觉语言：开箱即用拥有全球开发者最熟悉的清爽代码仓库与 PR 质感。
• 设计令牌双向同步：与 Figma 原型及 CSS 变量高度统一，规范极其严格。
• ♿️ 顶尖无障碍标准：深入优化键盘操作、高对比度与屏幕阅读器无障碍体验。
• 原生集成 Octicons：与 GitHub 官方图标库深度整合，开箱即用。

快速上手与示例代码

npm install @primer/react

import { ThemeProvider, BaseStyles, Button } from '@primer/react';

export default function App() {
  return (
    <ThemeProvider>
      <BaseStyles>
        <Button variant="primary">合并代码分支</Button>
      </BaseStyles>
    </ThemeProvider>
  );
}

技术选型建议与适用场景

• 非常适合：开源社区平台、技术文档站、代码审查系统以及 GitHub 插件和生态扩展应用。
• 不适用场景：非技术类消费品商城或追求浮夸花哨动效的视觉营销页面。