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

@wil-works/evoke-ui

v0.13.0

Published

Evoke UI — 纯 JS Vue3 官网/纯前端站点组件库,Clean Navy 设计语言(细字重展示排版 · 呼吸感 · 精致微交互)

Readme

@wil-works/evoke-ui

⚠️ 本包正在开发迭代中,尚未发布正式版:API、组件与视觉细节可能随版本调整,请勿用于生产环境。

Evoke UI — 纯 JS Vue3 官网/纯前端站点组件库,Clean Navy 设计语言(细字重展示排版 · 呼吸感 · 精致微交互),明暗双主题与运行时主题定制开箱即用。

npm · 在线文档:evoke-ui.wil-works.com

特性

  • Clean Navy 设计语言:藏青墨色 × 淡雾底 × Launch Blue,细字重展示标题与呼吸感排版,明暗双主题(html.dark 令牌重映射)
  • 运行时主题定制:主色(淡色阶自动生成)/ 圆角 / 间距 / 容器宽四维配置,EvConfigProvider 或 useThemeConfig 即时生效
  • 签名组件:EvSearchBox 大搜索栏 + EvIconGrid 可搜索图标网格(内置 960+ 图标,点击复制图标名)
  • 官网区块全家桶:Hero / 导航页脚 / 定价对比 / FAQ / 文章与个人名片 / 音视频与留言表单,企业站与个人站要素齐备
  • 零运行时依赖:仅 peer vue;图标为生成期静态快照,展示集独立 chunk 按需加载
  • 轻量动效:spring 弹性微交互 + v-reveal 滚动浮现指令

图标:核心集 72 个语义名内置;展示集 922 个原生名按需加载。组件 class 前缀 ev-、令牌前缀 --ev-* 为本库独立命名空间。

安装

pnpm add @wil-works/evoke-ui
import { createApp } from 'vue'
import EvokeUI from '@wil-works/evoke-ui'
import '@wil-works/evoke-ui/styles'

const app = createApp(App)
app.use(EvokeUI) // 全量注册 Ev* 组件 + v-reveal 指令 + 主题初始化

按需导入

不打全量插件时,单个组件可从子路径直接引入(自带类型声明,与主入口共享同一组件实例):

import EvButton from '@wil-works/evoke-ui/button'

子路径名与组件名对应(EvIconButton → icon-button、EvAvatarGroup → avatar-group)。样式始终走全局一份,按需导入时记得同样引入:

import '@wil-works/evoke-ui/styles'

组件一览

| 分类 | 组件 | | --- | --- | | 基础 | EvIcon EvButton EvIconButton EvTag EvBadge EvKeycap EvTabs EvSwitch EvAvatar EvAvatarGroup | | 表单 | EvInput EvTextarea EvSelect EvField | | 布局 | EvSection EvCard EvHero EvNavbar EvFooter EvContainer EvConfigProvider | | 区块 | EvSearchBox EvIconGrid EvFeatureGrid EvPricingCard EvFaq EvQuote EvStatistic EvAlert EvTimeline EvComparisonTable EvCta EvNewsletter EvLogoCloud EvArticleCard EvProfileCard EvMarquee | | 媒体与交互 | EvVideo EvAudio EvCarousel EvContactForm | | 反馈与主题 | EvCodeBlock EvThemeToggle | | 移动端 | EvNavBar EvTabbar EvTabbarItem EvActionSheet EvPullRefresh EvLoadMore |

组合式 API:useTheme(明暗切换)/ useCopy(剪贴板)/ useThemeConfig(主题四维定制 + applyPreset 风格方案); 预设:EV_STYLE_PRESETS(企业官网/个人站/设计工作室等一键方案)与颜色/圆角/间距/容器四组单项预设; 指令:v-reveal(滚动浮现,五种变体);图标注册表:registerIcons / getIconByName / loadShowcaseIcons。

文档

组件 API、用法示例与主题定制器见在线文档站:evoke-ui.wil-works.com。

License

MIT(图标形状源自 Remix Icon,Remix Icon License v1.0,免费商用)