> ## 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 nativa e theming

Primitivos de ecrã e view-models partilhados que espelham as decisões de design da web.

## Antes de começar

Abra seu projeto supastack baixado em Visual Studio Code usando Arquivo → Abrir pasta e escolha Terminal → Novo Terminal. A raiz do repositório é a pasta que contém package.json, apps e pacotes. Execute o comando abaixo e deixe seu terminal aberto. Se um comando não for reconhecido, conclua o guia de instalação da ferramenta antes de continuar.

Leia o tutorial da plataforma primeiro. Um servidor é o processo do aplicativo que responde às solicitações do navegador ou do telefone. A Web lê apps/web/.env.local, Expo lê apps/mobile/.env.local e os comandos de migração de banco de dados leem root .env. A demonstração sem banco de dados/painel é separada das contas reais/auth, que precisam migrar para Postgres. Uma finalização de compra somente por telefone ou desktop precisa de um back-end da Web executado separadamente.

[Instale as ferramentas e obtenha o código](https://supastack.dev/pt/docs/web/before-you-start.md)

[Aprenda comandos, arquivos e configuração](https://supastack.dev/pt/docs/web/terminal-basics.md)

[Conclua o tutorial de primeira execução para dispositivos móveis](https://supastack.dev/pt/docs/mobile/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/mobile start
```


## Instalação e configuração

As primitivas de tela ficam em apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — estilizadas a partir de apps/mobile/src/theme, de modo que uma decisão visual feita para a web seja refletida na interface nativa. Nas configurações de Aparência, o modo “Acompanhar aplicativo web” (apps/mobile/src/theme/synced.ts via GET/PUT /api/mobile/appearance) aplica o pacote de cores web sincronizado do usuário conectado a partir de um cache local.

O packages/ui-native traz os helpers de view-model multiplataforma: createEntitlementCard transforma o estado de permissões do servidor no título, status, detalhe, label de ação e label de acessibilidade de um cartão, para que web e mobile renderizem a mesma decisão de acesso.

```
apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }
```


## Fluxo de implementação

Compõe ecrãs a partir dos primitivos partilhados antes de escrever novos elementos; iguala os tokens e a densidade do módulo de tema em vez de hardcodar tamanhos e cores.

Mantém a copy de produto fora dos primitivos — eles renderizam labels, não decisões de copy. Transporta os labels de acessibilidade através de linhas custom como o createEntitlementCard faz.


## Verificação e resolução de problemas

Verifica um ecrã em claro e escuro, no maior tamanho de texto, com labels de screen reader e num dispositivo pequeno. Um componente que trunca ou corta a 200% de texto não está terminado.


## Seguinte

[Direitos de acesso em dispositivos móveis](https://supastack.dev/pt/docs/mobile/entitlements.md)