> ## 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 kit and blocks

Shared components, design tokens, and the block catalog.

## Before you begin

Open your downloaded supastack project in Visual Studio Code using File → Open Folder, then choose Terminal → New Terminal. The repository root is the folder containing package.json, apps and packages. Run the command below there and leave its terminal open. If a command is not recognized, finish the tool installation guide before continuing.

Read the platform tutorial first. A server is the app process that answers browser or phone requests. Web reads apps/web/.env.local, Expo reads apps/mobile/.env.local, and database migration commands read root .env. The no-database /dashboard demonstration is separate from real /auth accounts, which need migrated Postgres. A phone or desktop-only checkout needs a separately running Web backend.

[Install the tools and get the code](https://supastack.dev/docs/web/before-you-start.md)

[Learn commands, files and configuration](https://supastack.dev/docs/web/terminal-basics.md)

[Complete the Web first-run tutorial](https://supastack.dev/docs/web/ship-in-5-minutes.md)

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


## Setup and configuration

packages/ui-web holds the shared product components (buttons, inputs, cards, badges, dialogs, shell pieces) and packages/design-tokens the token source that app-theme.css maps into CSS variables. The /kit-blocks route mounts the block catalog — composed sections you can lift into your product.

apps/mobile consumes packages/ui-native for the equivalent native primitives, so surface styling stays per-platform while contracts stay shared.

```
# 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-*)
```


## Implementation workflow

Compose screens from the shared components first; reach for a custom element only when the kit cannot express the pattern. New shared pieces belong in ui-web with token-driven styling so every theme pack applies automatically.

Keep marketing components (src/marketing) out of product surfaces and vice versa — the two chrome systems are intentionally separate.


## Verification and troubleshooting

Verify a new component against every density/radius/font preset and at least one light and one dark pack. Check keyboard focus, 320px layout, and reduced motion; the kit gallery on /settings/appearance is the fastest sweep.


## Next

[Locales and copy](https://supastack.dev/docs/web/i18n.md)