> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# UI 套件与区块

共享组件、设计令牌与区块目录。

## 开始之前

使用“文件”→“打开文件夹”在 Visual Studio Code 中打开下载的 supastack 项目，然后选择“终端”→“新建终端”。存储库根目录是包含 package.json、apps 和 packages 的文件夹。运行下面的命令并保持终端打开。如果无法识别命令，请先完成工具安装指南，然后再继续。

首先阅读平台教程。服务器是响应浏览器或电话请求的应用程序进程。 Web 读取 apps/web/.env.local，Expo 读取 apps/mobile/.env.local，数据库迁移命令读取 root .env。无数据库/仪表板演示与真实/身份验证帐户分开，需要迁移Postgres。仅电话或桌面结帐需要单独运行的 Web 后端。

[安装工具并获取代码](https://supastack.dev/zh/docs/web/before-you-start.md)

[学习命令、文件和配置](https://supastack.dev/zh/docs/web/terminal-basics.md)

[完成Web首次运行教程](https://supastack.dev/zh/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## 安装与配置

packages/ui-web 包含共享产品组件(按钮、输入、卡片、徽章、对话框、外壳部件),packages/design-tokens 是 app-theme.css 映射为 CSS 变量的令牌来源。/kit-blocks 路由挂载区块目录 —— 你可以带入产品的组合区块。

apps/mobile 消费 packages/ui-native 以获得等价原生原语,因此端面样式按平台保留,而契约保持共享。

```
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)
```


## 实现流程

优先用共享组件组合界面;只有当套件无法表达某个模式时才退回到自定义元素。新的共享部件属于 ui-web,采用令牌驱动的样式,使每个主题包自动应用。

将营销组件(src/marketing)保持在产品端面之外,反之亦然 —— 两套外壳系统是有意分离的。


## 验证与排障

对每个 density/radius/font 预设以及至少一个亮色和一个暗色包验证新组件。检查键盘焦点、320px 布局和 reduced motion;/settings/appearance 的套件画廊是最快的检查方式。


## 下一篇

[语言与文案](https://supastack.dev/zh/docs/web/i18n.md)