跳到主要内容
PIXELSMITH UI 0.1.0 VUE 3 + VANILLA · ZERO RUNTIME DEPS STAR ON GITHUB ↗

HANDCRAFTED PIXEL UI KIT · EST. 2026

CHUNKY PIXELS. SERIOUS INTERFACES.

像素风的外壳，生产级的里子。16 个可访问的 Vue 3 组件、一份独立的 CSS + JS 运行时——表单、标签页、对话框、菜单和 Toast 全部开箱即用，零运行时依赖，可主题化，离线也能跑。

16 COMPONENTS 0 RUNTIME DEPS MIT LICENSE VUE 3 OPTIONAL
GITHUB 仓库 浏览组件
git clone https://github.com/azwc/PixelSmith.git
cd PixelSmith && pnpm install && pnpm build

源码项目，未发布到 npm / pnpm registry；本地构建后使用 dist/ 产物。

VUE COMPONENTS
16
RUNTIME DEPS
0
THEMES
02
VANILLA JS
13KB
VUE 3 LOCAL DIST
SMITH.EXE LIVE

~/PixelSmith $ pnpm build

✔ 16 components compiled in 0.42s

[14:32:01] style tokens loaded · 96 variables

[14:32:01] runtime mounted · tabs / modal / dropdown

# 这些按钮是真的，点一下试试

$_

~/pixelsmith-site BUILD: PASS
SMITH / UNIT 01

THE COMPONENT LAB

EVERY CONTROL.
HAND-CUT.

16 VUE COMPONENTS CSS PRIMITIVES

这页上的每个控件都是真的：点一下、输点字、切主题、打开对话框。全部由 kit 的原始类名和 data-pix 运行时驱动。

01 / BUTTONS · 按钮

CORE
TONES
SIZES & STATES
BADGES & PIXEL DETAIL
DEFAULT VUE 3 LIVE HOT BETA 8-BIT

5 种色调、3 种尺寸，外加 loading、禁用与图标按钮。按下会位移，而不是弹一下。

02 / FORMS · 表单

LIVE

显示在排行榜上的名字。

原生控件优先，标签、提示与错误态都已接线，ARIA 由组件负责。

03 / TABS · 标签页

KEYBOARD READY

面板隐藏时保留 DOM 状态，方向键、Home、End 全部可用。视觉上只有硬边框、阶梯阴影和零圆角。

ARIA TABLIST ROVING FOCUS STATE PRESERVED

声明式标签页，运行时不依赖任何框架。

04 / OVERLAYS · 浮层

FOCUS TRAP

Tab 陷阱 · Escape 关闭 · 滚动锁定 · 焦点还原

模态、菜单、Toast 与 tooltip，键盘和焦点都已安排明白。

05 / FEEDBACK · 反馈

STATUS
BUILD PROGRESS 68%
TEST COVERAGE 92%

ALL SYSTEMS NOMINAL

字体已内嵌，零运行时依赖，断网也能正常显示。

分段进度、像素 spinner 和 inline alert，状态一眼可读。

06 / DATA · 数据表

STRIPED
LEADERBOARD · 用真实组件拼出来
PLAYER CLASS SCORE STREAK STATUS
NOVA RANGER 9,840 12x ONLINE
BYTE MAGE 8,720 08x ONLINE
ECHO ROGUE 7,410 05x AWAY
GLITCH TANK 6,980 03x ONLINE

斑马纹、数字对齐、头像与状态徽章——直接可用的数据表。

BUILT TO BE USED

PIXEL ART.
PRODUCTION GRADE.

A11Y MINDFUL FROM SCRATCH

不是一套复古皮肤，是一套能交付的界面系统。每个细节都为真实产品和真实键盘用户准备。

16 VUE COMPONENTS

按钮、表单、标签页、对话框、菜单、Toast、表格……类型化 props、slots 和原生事件，一个插件全量注册。

TYPED PROPS · SLOTS

STANDALONE CSS + JS

先本地构建，再把 dist/ 的 CSS + JS 放进页面。数据属性挂载标签页、对话框和菜单，不需要打包器接入。

LOCAL DIST · IIFE

TOKEN-BASED THEMING

每个颜色、边框和阴影都是 CSS 自定义属性。覆盖几个变量，就是一套新皮肤，不需要重新编译。

CSS CUSTOM PROPERTIES

TWO THEMES, ONE SYSTEM

data-pix-theme 一切即换，默认深色。没有 FOUC，也没有被写死的颜色。

DARK · LIGHT

EMBEDDED PIXEL FONTS

Press Start 2P 与 VT323 以 base64 内嵌进 CSS，零字体请求，离线也完整。

SIL OFL 1.1 · NO CDN

FOCUS MANAGEMENT

3px 焦点环、焦点陷阱、roving tabindex、Escape 关闭、滚动锁定，并尊重 prefers-reduced-motion。

KEYBOARD FIRST

MIT LICENSED

商用、二次开发、私有部署都可以。保留版权声明即可，没有附加条款。

FREE TO SHIP

ZERO RUNTIME DEPS

Vue 只是可选的 peer dependency；vanilla IIFE 包约 13KB，gzip 后约 4.4KB。

13KB · 4.4KB GZIP

QUICK START / 快速开始

TWO MODES.
ONE SOUL.

VUE 3 VANILLA

从本地源码开始，两条路共享同一套 CSS 与运行时，随时可以混用。

LOCAL BUILD / 本地构建

FROM SOURCE
git clone https://github.com/azwc/PixelSmith.git
cd PixelSmith && pnpm install && pnpm build

VUE 3 / PLUGIN

RECOMMENDED

从本地源码注册一次，全量可用；也可以按需 import 单个组件。

MAIN.TS
import { createApp } from 'vue' import PixelSmith from '../PixelSmith/src/vue' import '../PixelSmith/src/styles/index.css' import App from './App.vue' createApp(App) .use(PixelSmith) .mount('#app')

SOURCE IMPORT

演示入口直接引用本地源码；复制到你的项目时调整相对路径。Vue 3 由你的应用提供。

VANILLA / SCRIPT TAG

BUILD ONCE

先本地构建，再把 dist/ 里的两个文件放进页面。data-pix 负责声明式行为，window.PixelUI 负责命令式调用。

INDEX.HTML
<link rel="stylesheet" href="./dist/pixelsmith.css" /> <script src="./dist/pixelsmith.js"></script> <button class="pix-btn pix-btn--primary" data-pix-open="hello-modal"> SAY HELLO </button> <script> PixelUI.toast({ tone: 'success', title: 'Hello', message: 'Zero dependencies.' }) </script>

STATIC HOSTING READY

纯静态文件，放到任意静态托管或本地目录即可。

SOURCE

克隆仓库，在本地安装开发依赖并构建出 dist/；没有可用的 registry 安装包。

IMPORT

Vue 直接 import 本地源码；vanilla 从 dist/ 引入 link + script，数据属性自动挂载。

SHIP

纯静态交付，无 API、无追踪、无运行时依赖。字体已内嵌，离线可用。

在 GitHub 阅读完整文档 回到组件实验室 MIT LICENSE · 0 TRACKERS · NO SURPRISES

THEME SYSTEM / 主题系统

ONE TOKEN.
EVERY PIXEL.

2 THEMES 0 ROUNDED CORNERS

两个主题，一套令牌。所有像素都由变量堆出来，切换主题不需要刷新页面。

TOKEN SWATCHES

LIVE
BG--pix-bg
SURFACE--pix-surface
INK--pix-ink
PRIMARY--pix-primary
SECONDARY--pix-secondary
SUCCESS--pix-success
DANGER--pix-danger
ACCENT--pix-accent

覆盖 --pix-primary、--pix-border 或 --pix-shadow-size 就能换掉整套外观，不需要重新构建。

← 真的会切换整页

TYPE & ATTRIBUTION

EMBEDDED
PRESS START 2P DISPLAY / HEADINGSSIL OFL 1.1
The quick brown fox jumps over 13 lazy pixels. BODY / CODESIL OFL 1.1

两款字体均已以 base64 形式内嵌进 pixelsmith.css，页面不会发起任何字体网络请求。授权详情见 FONT-LICENSES.md。

  • 默认深色，data-pix-theme="light" 切换
  • 主题选择写入 localStorage，刷新后保持
  • 遵循 prefers-reduced-motion
  • 仅使用 CSS 自定义属性，无运行时样式注入