sakana-element

Sakana Element

A Vue 3 + TypeScript component library with pixel art design aesthetic.

像素风格的 Vue 3 + TypeScript 组件库。

Documentation / 文档 | GitHub

Features / 特性

• 🎨 CSS Houdini Pixel Rendering — pixel-border & pixel-shadow Paint Worklets / CSS Houdini 像素边框和阴影
• 🧩 40 Components — Pixel-art styled UI toolkit / 40 个像素风格组件
• ⭐ 486 Pixel Icons — Full pixelarticons set with animations / 内置 486 个像素图标
• 🌙 Catppuccin Dark Mode — System-preference auto-detection / Catppuccin 暗色模式
• 🔧 TypeScript — Full type definitions with IntelliSense / 完整类型定义
• 📦 Tree-Shakable — Per-component ES module chunks / 按组件分包
• 🌐 5 Locales — EN, ZH-CN, ZH-TW, JA, KO / 五种语言

Install / 安装

pnpm add sakana-element
# or
npm install sakana-element

Quick Start / 快速开始

// main.ts
import { createApp } from 'vue'
import SakanaElement from 'sakana-element'
import 'sakana-element/dist/index.css'
import App from './App.vue'

createApp(App).use(SakanaElement).mount('#app')

Components / 组件

Basic / 基础

Form / 表单

Data Display / 数据展示

Layout / 布局

Navigation / 导航

Feedback / 反馈

Config / 配置

Composition Hooks / 组合式函数

import { useTheme } from 'sakana-element'

const { theme, toggleTheme, setTheme } = useTheme()

toggleTheme()        // Toggle between dark and light
setTheme('dark')     // Force dark mode
setTheme('system')   // Follow system preference

Icons / 图标

486 icons from pixelarticons are bundled out of the box — with support for flip, rotation, animations, and custom SVG registration.

内置 pixelarticons 的 486 个像素风格图标，开箱即用 — 支持翻转、旋转、动画及自定义 SVG 注册。

<px-icon icon="home" size="lg" type="primary" />
<px-icon icon="heart" color="#e91e63" beat />

Bundled Font / 内置字体

This package includes the zpix pixel font (~6.9MB .ttf), which provides the retro pixel art look. It loads automatically via CSS @font-face when you import sakana-element/dist/index.css — no extra setup required. The font accounts for most of the package size (~8MB total); actual library code + CSS is ~1MB.

本组件库内置了 zpix 像素字体（~6.9MB .ttf），用于实现复古像素风格外观。导入 sakana-element/dist/index.css 后字体会通过 CSS @font-face 自动加载，无需额外配置。字体文件占包体积大部分（总计约 8MB），组件库本身的代码和样式仅约 1MB。

Dark Mode / 暗色模式

Add the px-dark or dark class to an ancestor element:

在祖先元素上添加 px-dark 或 dark 类名：

<html class="px-dark">
  <!-- All Sakana Element components will render in dark mode -->
</html>

Links / 链接

• Documentation / 文档
• GitHub
• npm
• Changelog

License / 许可证

ISC