让企业级应用界面 更一致、更优雅

基于 Svelte 5 runes 的现代组件库，从复杂中后台场景提炼而来 —— 开箱即用的优质默认基础，需要时充分开放定制。

快速开始 浏览组件

共 89 个组件 · 无障碍 · 主题化 · i18n · 性能基准

核心特性

开箱即用

89+ 高质量组件，覆盖中后台全场景，优质默认基础保证天生一致的体验。

主题化定制

数百个分层 Design Token，全局到组件级深度定制，不懂 CSS 也能换肤。

深色模式

任意主题自动支持暗色，运行时动态切换，亦可局部区域开启。

国际化

多语言文案、日期时区与 RTL 布局开箱支持，站点与文档双语适配。

无障碍

语义化标签、WAI-ARIA、键盘交互与焦点管理，每个组件附 a11y 说明与测试。

Svelte 5 原生

基于 runes 构建，headless 与渲染分层，体积小、类型完备、性能有基准门禁。

快速开始

1 安装

pnpm add @chenzy-design/svelte @chenzy-design/tokens

2 引入设计令牌 CSS（必须）

在应用入口（如 SvelteKit 的 +layout.svelte）引入一次。不引入组件将没有样式。

<script>
  import '@chenzy-design/tokens/tokens.css';
  let { children } = $props();
</script>
{@render children()}

3 使用组件

<script lang="ts">
  import { Button, Input } from '@chenzy-design/svelte';
  let text = $state('');
</script>

<Button type="primary">主要按钮</Button>
<Input bind:value={text} placeholder="请输入" />

要求 Svelte 5（runes）。暗色模式：给 <html> 设置 data-theme="dark"。