English · 简体中文
A high-quality Svelte component library benchmarked against Semi Design. Accessible · Themeable · i18n · Multi-framework-ready · Performance-benched · AI-friendly.
Architecture & conventions:
AGENTS.md. Requirement specs:specs/. Runbooks:.claude/skills/.
📖 Live docs: https://chenzylab.github.io/chenzy-design/
pnpm add @chenzy-design/svelte @chenzy-design/tokens<!-- App entry (e.g. +layout.svelte): import the design-token CSS — required, or components render unstyled -->
<script>
import '@chenzy-design/tokens/tokens.css';
let { children } = $props();
</script>
{@render children()}<!-- Use components on any page -->
<script lang="ts">
import { Button, Input } from '@chenzy-design/svelte';
let text = $state('');
</script>
<Button type="primary">Primary</Button>
<Input bind:value={text} placeholder="Type here" />Requires Svelte 5 (runes). Dark mode: set data-theme="dark" on <html>. Full integration guide: packages/svelte/README.md.
Tokens are runtime CSS variables (3 layers: global → alias → component), so theming needs no SCSS compile or npm-pack step. Three paths:
- Scoped —
<ConfigProvider tokens={{ 'color-primary': '#0af' }}>injects overrides into a subtree only. - Visual editor — the docs site
/dsmpage: tweak tokens with live preview across components, export a:root{}CSS snippet. - Brand pack —
@chenzy-design/theme-cli:chenzy-theme init+chenzy-theme buildturn atheme.config.tsinto a distributabletheme.css(with dark-mode section). See the Theming guide.
Svelte 5 · Vite · UnoCSS · pnpm monorepo · TypeScript (strict)
packages/
tokens/ @chenzy-design/tokens Design tokens (source of truth, 3 layers)
unocss-preset/ @chenzy-design/unocss-preset token -> UnoCSS theme
theme-cli/ @chenzy-design/theme-cli CLI: theme config -> theme.css (brand packs)
core/ @chenzy-design/core Headless primitives (framework-agnostic)
locale/ @chenzy-design/locale i18n language packs & formatting
icons/ @chenzy-design/icons Icons
svelte/ @chenzy-design/svelte Svelte component implementation (main package)
docs/ Docs / demo site (private)
Dependency direction: tokens -> unocss-preset -> core -> svelte; icons / locale are consumed by svelte.
pnpm install
git config core.hooksPath .githooks # enable commit hooks
pnpm build:tokens # generate tokens.css / types first
pnpm dev # start the docs site (component demos + theme toggle)
pnpm verify # lint + typecheck + test + buildBased on vitest 4's toMatchScreenshot (real chromium via the playwright provider); baselines live in each component's __screenshots__/.
pnpm test:visual # compare current render against baselines
pnpm test:visual:update # update baselines after intentional visual changesBaselines carry a platform suffix (e.g.
-chromium-darwin.png). Font antialiasing differs between macOS / Linux, so baselines are not cross-platform and are not wired into the CI gate. Used locally as a visual-regression tool.
Contributions go through pull requests only — main is protected and requires review + passing CI before merge. See CONTRIBUTING.md for the workflow.
- Commit messages follow Conventional Commits and must not contain any AI/assistant references (enforced by
.githooks/commit-msg, see AGENTS.md §7.1). - Changes that need a release must include a changeset:
pnpm changeset. Maintainers runpnpm version-packages->pnpm release. - Dependency updates are opened weekly by Dependabot; PRs are auto-labeled by path via the labeler.
- M0 foundation: monorepo, 3-layer token system (dark + reduced-motion), unocss-preset, core primitives, locale (zh_CN / en_US), CI / quality gates
- 69 components implemented (basic / input / navigation / display / feedback / others), with meta, tokens, a11y
- Docs site (SvelteKit SSG): auto-generated API tables, debug panel, usage scenarios, dark mode, Pagefind search -> visit online
- npm published: 6
@chenzy-design/*packages, automated versioning via Changesets (fixed lockstep versions)