A React UI component library inspired by The Legend of Zelda: Breath of the Wild. 83 components with dark theme, Sheikah glow effects, and AI-consumable design specs.

一套受《塞尔达传说：旷野之息》启发的 React UI 组件库。 83 个组件，暗色主题 + 希卡之石辉光效果，附带 AI 可消费的设计规范。

Unofficial, non-commercial fan project — not affiliated with Nintendo. 非官方、非商用粉丝创作，与任天堂无隶属关系。详见 Disclaimer & License ↓

• Online Preview (PC): zelda-hyrule-ui
• Online Preview (Mobile): zelda-hyrule-ui-mobile
• Component Docs: All 83 components — live previews, code examples, and props tables
• Showcase: Real-world UI examples — title screens, HUD overlays, quest trackers, and more

• 在线预览（PC）： zelda-hyrule-ui
• 在线预览（Mobile）： zelda-hyrule-ui-mobile
• 组件文档： 全部 83 个组件——实时预览、代码示例和 Props 表格
• 效果展示： 真实界面示例——标题屏、HUD、任务面板等完整场景

Real-world demos built from the skill alone — each is a single HTML file: zero dependencies, no React, no build step, real embedded Hylia Serif + Figma-exact SVG paths.

仅凭 skill 产出的实战案例——每个都是单 HTML 文件：零依赖、无 React、无构建， 内嵌真实 Hylia Serif 字体与 Figma 逐节点导出的 SVG path。

Finals Boss Rush · 中文 Turn exam revision into a boss fight 把期末复习做成打 Boss	June Quest Calendar · 中文 Student calendar with an interactive Quest Log 学生日程表 + 可交互任务面板
Daily Shrine Tracker · 中文 Habit tracker — 4 Spirit Orbs = 1 Heart Container 习惯打卡，集精神球换心之容器	Shrine Focus Timer · 中文 Pomodoro — the Stamina wheel counts down 番茄钟，精力轮倒计时

# React
npm install zelda-hyrule-ui

# Vue 3 (official port — MVP component set, props 1:1 with React)
# Vue 3 官方移植版——MVP 组件集，props 与 React 版 1:1 对齐
npm install zelda-hyrule-ui-vue

🟢 Vue users: zelda-hyrule-ui-vue ships 11 components (Button / Card / Dialog / Modal / Divider / Loading / HealthBar / StaminaWheel + SheikahBackground / SheikahScanlines / SheikahSymbol) sharing the exact same design tokens, Less modules, and Figma-exact assets — pixel-identical to React. The rest are being ported: vote / track at #2. Usage mapping: skill/references/vue-usage.md · Package docs: packages/vue/README.md

import { HealthBar, StaminaWheel, Button, Card } from 'zelda-hyrule-ui'
import 'zelda-hyrule-ui/style'

export default function App() {
  return (
    <div style={{ background: '#66645D', padding: 40, minHeight: '100vh' }}>
      {/* HUD elements */}
      <HealthBar current={10} max={13} bonus={3} />
      <StaminaWheel value={0.75} size={70} />

      {/* Cards */}
      <Card variant="sheikah" title="Sheikah Slate">
        Distilling rune...
      </Card>

      {/* Buttons */}
      <Button variant="sheikah">Activate</Button>
      <Button variant="primary">Confirm</Button>
    </div>
  )
}

More examples / 更多示例:

// Dialog
import { Dialog, DialogChoice } from 'zelda-hyrule-ui'

<Dialog type="speech" speaker="Old Man">
  It is cold here. You should find warm clothes.
</Dialog>

<DialogChoice
  options={[{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }]}
  selectedIndex={0}
/>

// Quest tracking
import { QuestListItem } from 'zelda-hyrule-ui'

<QuestListItem
  title="Destroy Ganon"
  location="Hyrule Castle"
  questType="main"
  state="marked"
/>

// Divine Beasts & Abilities
import { DivineBeast, SheikahAbility } from 'zelda-hyrule-ui'

<DivineBeast beast="ruta" charges={1} />
<SheikahAbility ability="magnesis" />
<SheikahAbility ability="stasis" plus />

// Sheikah Slate themed layout
import { SheikahBackground, SheikahScanlines, SheikahTextTitle } from 'zelda-hyrule-ui'

<SheikahBackground color="darkBlue">
  <SheikahScanlines animated opacity={0.08} />
  <SheikahTextTitle title="Compendium" description="Creatures of Hyrule" />
</SheikahBackground>

The simplest way to use this library with AI:

最简单的 AI 使用方式：

1. Give your AI the GitHub link and say "use this style to build me a landing page"

   把 GitHub 链接丢给 AI，说"用这个风格给我做一个落地页"

2. Or drop skill/SKILL.md into Cursor rules, then say "Build in Zelda style"

   或者把 skill/SKILL.md 放进 Cursor rules，然后说"用塞尔达风格做"

3. Or install the package and reference AI_USAGE.md for the full API

   或者安装包后参考 AI_USAGE.md 获取完整 API

4. For PPT / social-card layouts: pair with a dedicated layout skill (e.g. guizang's PPT / social-card skills) and let the AI apply the Zelda skin on top — see skill/references/layout-bridge.md. (Interop only; their AGPL code is never merged here — this project stays MIT.)

   做 PPT / 图文排版：可配合专门的排版 skill（如归藏的 PPT / 图文 skill），让 AI 在其版式上套塞尔达皮——见 skill/references/layout-bridge.md。（仅互操作，不合并其 AGPL 代码，本项目保持 MIT。）

📖 Full interactive docs with code examples and props tables: Online Documentation

完整交互式文档（含代码示例和 Props 表格）：在线文档

git clone https://github.com/chaos-xxl/zelda-hyrule-ui.git
cd zelda-hyrule-ui
npm install
npm run dev       # Start demo dev server
npm run build     # Build component library
npm run deploy    # Deploy demo to gh-pages

See CONTRIBUTING.md for guidelines.

贡献指南请参阅 CONTRIBUTING.md。

This project is built on top of the Zelda BOTW UI Kit by Hunter Paramore, shared on the Figma Community. All UI elements, icons, and visual structure originate from this kit. The Figma file is the foundation of every component in this library — all SVGs were exported node-by-node from the original work.

本项目基于 Hunter Paramore 在 Figma 社区分享的 Zelda BOTW UI Kit 构建。所有 UI 元素、图标和视觉结构都源自该素材包。本组件库的全部 SVG 都是从原始 Figma 文件中逐节点精确导出的。

If you use this library or the original UI kit, please credit Hunter Paramore.

如果你使用本库或原始素材，请同时致谢 Hunter Paramore。

Unofficial fan project · 非官方粉丝项目 This is a free, non-commercial fan project for learning and demonstration only. It is not affiliated with, endorsed by, or sponsored by Nintendo. The Legend of Zelda, Breath of the Wild, the Triforce, the Sheikah eye, and all related names and visual elements are trademarks of Nintendo Co., Ltd. No copyrighted Nintendo game assets are redistributed here — the visual design originates from a community CC BY 4.0 Figma kit. If you are a Nintendo rights holder with concerns, please open an issue and changes will be made promptly.

本项目为免费、非商用的粉丝创作，仅供学习与演示，与任天堂无任何隶属、背书或赞助关系。《塞尔达传说》《旷野之息》、三角力量、希卡之眼等相关名称与视觉元素均为任天堂（Nintendo Co., Ltd.）的商标。本仓库不再分发任天堂的受版权保护游戏素材——视觉设计来自社区 CC BY 4.0 的 Figma 素材包。如任天堂权利方有任何顾虑，请提 issue，我会第一时间处理。

Code: MIT. The MIT license grants full rights to use, modify, and redistribute the code, including commercially.

However, this project's visuals are inspired by Nintendo IP. The MIT license does not grant any rights to Nintendo's trademarks or game IP. Because of that, commercial use is strongly discouraged — this is a non-commercial fan creation, and any use touching the Zelda/Nintendo IP (especially commercial) is at your own risk and your own responsibility. See ATTRIBUTION.md for the full two-layer rights breakdown (CC BY 4.0 assets + Nintendo trademark layer).

代码：MIT。 MIT 授予对代码的使用、修改、再分发权利（含商用）。

但本项目视觉受任天堂 IP 启发，MIT 不授予任何任天堂商标或游戏 IP 的权利。因此强烈不建议商用——这是非商用粉丝创作，任何涉及塞尔达/任天堂 IP 的使用（尤其商用）风险与责任由使用者自负。完整的两层权利说明见 ATTRIBUTION.md（CC BY 4.0 素材层 + 任天堂商标层）。

MIT — 仅供学习和个人使用。本项目为粉丝创作，所有塞尔达相关商标归任天堂所有。