题面照录——**Chakra UI**；元描述全文——**简单、模块化、可访问的 React 应用 UI 组件**（Simple, Modular & Accessible）。**门柱双句**——Chakra UI is a component system for building products with speed（快速造产品的组件系统）＋可访问 React 组件句尾硬料 **Works with Next.js RSC**（兼容 Next.js 服务端组件）；**Start Building 配安装命令**照录——`npm i @chakra-ui/react`。**双横幅两件**——①**💎 Build faster with Premium Chakra UI Components**（Premium 付费组件与 Learn more 钮）②**Meet DateInput** 新件横幅。导航六件（Docs、Showcase、Spotlight、Blog、Guides、搜索位）。**Demo 组件五枚**——Slider、Pin Input、Tabs、Menu（Open Menu 态）、Switch。
🏗
三件套体系与三特性
架构双层照录。**三件套定义句** ★——**Chakra Ark Zag** 三行：Chakra UI = 造 web 应用的组件库；**Ark UI = headless 无头库**（造可复用可扩展设计系统）；**Zag.js = 有限状态机驱动的 UI 组件**（Finite State Machines 原词）。**Design System 三特性**——**Tokens**（语义令牌把设计决策收拢）、**Typography**（字体相关属性一处定制）、**Recipes**（组件变体轻松设计）；**三段代码示例全文入册**——`defineTokens`（colors 与 fonts 及 animations 含 slide-in-right 0.5s）、`defineTextStyles`（headline 4xl bold 与 subheadline 2xl semibold）、`defineRecipe`（base flex 列布局与 primary 变体 teal.600 白字）。**Built for developers, By developers** 标语与受众句（next-gen startups 到 established enterprises）同屏。
🔢
三硬数与证言首条
规模三行照录——**6M downloads / month**（**月下载 600 万**）、**40.7K github stars**、**7.6K discord members**；信任句 **Top-tier teams use and love Chakra**（顶级团队在用）；**证言首条全录**——Chakra UI is glorious（辉煌），**暗色模式 100% 内置**、焦点样式一致与微妙动画被点名（截断按实）；**受众句再读**——Built for modern product teams：从新锐初创到成熟企业。三硬数把下载、星、社区三面战力摆成一排，证言第一条就把暗色模式夸到 100%。
App 搜索序照实一笔——搜索词 chakra 返六条**全为冥想与能量疗愈类同名件**（Chakra Meditation Balancing 与 Healing 及 Balance、Your Chakra Buddy、Chakras Meditation、Chakra AI Energy Reading），**与 React 组件库无一相干**，正主无 iOS 官方件，**六条一条不录防混淆**（与 daisyUI 那页的 mui Lab 同款案例按实注记）。声明一句：本页不碰任何受限品牌词，黑名单模式扫描零命中。
🎛
双题录与导航操作面
操作面真径照录。**双题录互证**——blog 186,052 字节题为 Blog | Chakra UI、showcase 153,972 字节题为 Showcase | Chakra UI（两页 200 在册按实）；**导航六件操作层**——Docs 文档位、Showcase 案例位、**Spotlight 精选栏**（社区作品聚光位、与 showcase 分工按实）、Blog、Guides 指南、搜索位；**双入口句**——Start Building 配 npm 命令在门柱、Premium Learn more 挂横幅（真径 /premium 404 已注）；**Demo 五组件**（Slider 与 Pin Input 及 Tabs 及 Menu 与 Switch）与 Tokens 及 Typography 及 Recipes 三特性左右对咬——演示组件吃的就是那三套定义（defineTokens 与 defineTextStyles 及 defineRecipe 三段代码上一条已录）。四钮之外的出口全在这条操作带里。
🛡
素材路线与查重档案
素材与档案五条按实收口，本段保持纯文本写法以避开发布端解析坑。其一，**无方图源四笔与同图转正**——head 无任何 icon link、apple 与 icon 及 next 子域 apple 三探 404、og 是唯一存图；**封面与 logo 同取 og 1200 乘 630**（比例 1.90 正带、四连实测、横图转正有先例、像素实测把关），源在 next.chakra-ui.com 子域按实。其二，robots 与 sitemap 及 premium 三 404 按实（区别于网络失败）。其三，830KB 首页体量按实（RSC 载荷与代码示例占大头）。其四，五证言与三硬数为 live 直取（非存档）按实注。其五，黑名单模式扫描零命中、四步查重边界正则全空、V2 一次 404，基线连 chakra 域名都没撞过任何既有记录（list 的 chakra 计数为零按实）。
Chakra UI