npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

zelda-hyrule-ui-vue

v0.1.0

Published

An unofficial, non-commercial fan-made Vue 3 UI component library inspired by the art style of The Legend of Zelda: Breath of the Wild. Not affiliated with or endorsed by Nintendo.

Readme

zelda-hyrule-ui-vue

The official Vue 3 port of zelda-hyrule-ui — a UI component library inspired by The Legend of Zelda: Breath of the Wild. Dark theme, Sheikah glow effects, pixel-identical to the React version (same design tokens, same Less modules, same Figma-exact SVG assets, real Hylia Serif bundled).

zelda-hyrule-ui(塞尔达旷野之息风格组件库)的官方 Vue 3 移植版。与 React 版共享同一份设计 token / Less 样式 / Figma 逐节点导出的 SVG 素材,视觉像素级一致。

Install / 安装

npm i zelda-hyrule-ui-vue

Requires vue >= 3.5.

Usage / 使用

<script setup lang="ts">
import { HealthBar, Button, SheikahBackground, SheikahScanlines } from 'zelda-hyrule-ui-vue'
import 'zelda-hyrule-ui-vue/style'
</script>

<template>
  <SheikahBackground color="darkBlue">
    <SheikahScanlines animated :opacity="0.1" />
    <HealthBar :current="10" :max="13" :bonus="3" />
    <Button variant="sheikah">Activate</Button>
  </SheikahBackground>
</template>

Components (MVP) / 当前组件集

Button · Card · Dialog · Modal · Divider · Loading · HealthBar · StaminaWheel · SheikahBackground · SheikahScanlines · SheikahSymbol

Props are 1:1 identical to the React version — same names, same enums, same defaults. Differences are Vue idioms only: callbacks are emits (onClose@close), children/icon/footer are slots, and class/style fall through natively.

Props 与 React 版 1:1 对齐——同名、同枚举、同默认值。区别仅为 Vue 语法:回调转 emit (onClose@close),children/icon/footer 转 slot,class/style 原生透传。

The remaining components are being ported — track progress and vote at issue #2. Full docs / design specs: main repository.

其余组件移植中——进度与催更见 issue #2。 完整文档 / 设计规范见主仓库


Unofficial fan project · 非官方粉丝项目 Free, non-commercial, for learning and demonstration only. Not affiliated with, endorsed by, or sponsored by Nintendo. The Legend of Zelda, Breath of the Wild, and all related names and visual elements are trademarks of Nintendo Co., Ltd. Visual design originates from a community CC BY 4.0 Figma kit by Hunter Paramore — see ATTRIBUTION.md.

本项目为免费、非商用的粉丝创作,仅供学习与演示,与任天堂无任何隶属、背书或赞助关系。 相关名称与视觉元素均为任天堂的商标。视觉设计来自社区 CC BY 4.0 Figma 素材包,详见 ATTRIBUTION。

MIT (code only — grants no rights to Nintendo trademarks or IP)