# Sistema de design Chakra UI ## Prévia da interface do sistema de design Chakra UI Experimente a validação de campos vazios, uma falha simulada ao salvar, a retenção dos dados inseridos, a confirmação local de sucesso e a alternância de aparência. ## Referência de design do sistema de design Chakra UI Referências do tema padrão do Chakra UI 3.37.0, além dos tokens do aplicativo OpenDesign, identificados explicitamente. Os valores em rem seguem o tamanho da fonte raiz; os equivalentes em pixels consideram 16px. Esta é uma referência de trabalho selecionada, não o tema exportado completo. ### Cores semânticas padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | bg | white / black | Plano de fundo da página nos temas claro e escuro. | | bg.panel | white / gray.950 | Superfície do cartão nos temas claro e escuro. | | bg.subtle | gray.50 / gray.950 | Superfície discreta. | | fg | black / gray.50 | Texto principal. | | fg.muted | gray.600 / gray.400 | Texto de apoio. | | border | gray.200 / gray.800 | Limite de painéis e controles. | | fg.error | red.500 / red.400 | Texto de erro. | | bg.error | red.50 / red.950 | Superfície de erro. | | teal.fg | teal.700 / teal.300 | Texto sobre uma superfície teal sutil. | | teal.subtle | teal.100 / teal.900 | Estilo da etapa atual. | ### Valores primitivos usados neste exemplo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | gray.50 | #fafafa | Plano de fundo claro. | | gray.200 | #e4e4e7 | Borda clara. | | gray.800 | #27272a | Borda escura. | | gray.950 | #111111 | Plano de fundo escuro. | | teal.700 | #0c5d56 | A ação personalizada no tema claro faz referência a este valor. | | teal.300 | #5eead4 | A ação personalizada no tema escuro faz referência a este valor. | ### Subconjunto padrão de espaçamentos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | spacing.1 | 0.25rem / 4px | Preenchimento vertical de status. | | spacing.2 | 0.5rem / 8px | Espaço entre controles em linha. | | spacing.3 | 0.75rem / 12px | Espaço entre ações do grupo. | | spacing.4 | 1rem / 16px | Preenchimento para telas pequenas. | | spacing.6 | 1.5rem / 24px | Espaçamento entre campos do formulário. | | spacing.8 | 2rem / 32px | Espaço principal do layout. | | spacing.10 | 2.5rem / 40px | Espaçamento maior disponível. | | spacing.12 | 3rem / 48px | Espaçamento disponível entre seções. | ### Subconjunto padrão de tipografia | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | fonts.body / fonts.heading | Inter, system fallbacks | O token de fonte não baixa o Inter por conta própria. | | fontSizes.xs | 0.75rem | Anotação do exemplo. | | fontSizes.sm | 0.875rem | Texto de ajuda. | | fontSizes.md | 1rem | Campos e texto corrido. | | fontSizes.lg | 1.125rem | Tamanho maior disponível para o texto corrido. | | fontSizes.xl | 1.25rem | Título do cartão. | | fontSizes.2xl | 1.5rem | Título do exemplo. | | fontWeights.medium / semibold | 500 / 600 | Hierarquia de rótulos. | | lineHeights.shorter / moderate | 1.25 / 1.5 | Ritmo entre título e parágrafo. | | letterSpacings.wide | 0.025em | Antetítulo pequeno. | ### Raios padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | radii.sm | 0.25rem / 4px | Canto pouco arredondado. | | radii.md | 0.375rem / 6px | Etiqueta de status neste exemplo. | | radii.lg | 0.5rem / 8px | Arredondamento moderado. | | radii.xl | 0.75rem / 12px | Cartão de perfil neste exemplo. | | radii.full | 9999px | Formato de cápsula, não usado no formulário. | ### Limites responsivos padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | sm | 480px | A linha de ações pode ficar na horizontal. | | md | 768px | A coluna de progresso fica ao lado do formulário. | | lg | 1024px | Limite disponível para layouts largos. | | xl | 1280px | Limite disponível para desktop. | | 2xl | 1536px | Limite disponível para telas extra largas. | ### Tokens semânticos do aplicativo: definidos abaixo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | workspace.canvas | gray.50 / gray.950 | Mapeamento personalizado do plano de fundo nos temas claro e escuro. | | workspace.action | brand.700 / brand.300 | Plano de fundo personalizado das ações; os valores primitivos da marca são declarados em theme.js. | | workspace.onAction | white / gray.950 | Texto personalizado das ações, combinado com seu plano de fundo. | ## Guia completo do sistema de design Chakra UI Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Chakra UI: o sistema v3 — configuração, tokens e componentes ### Crie um sistema em vez de repassar um objeto de tema antigo > A implementação tem três camadas: theme.js define as decisões de design, main.jsx fornece o sistema resultante e App.jsx compõe o formulário. createSystem(defaultConfig, config) mantém as receitas de componentes padrão ao mesclar a configuração da aplicação. Um sistema personalizado sem esses padrões exigiria mais definições; estender os padrões é uma escolha deliberada. A prévia usa componentes do Chakra, não elementos substitutos desenhados. A barra lateral é uma lista ordenada de etapas, específica da aplicação; ela não afirma que o componente Steps do Chakra esteja montado. O cartão de perfil, os campos, o seletor, os alertas e os botões são composições nativas do Chakra. Consulte a especificação de apoio ### O que pertence a cada camada - tokens: valores primitivos reutilizáveis, incluindo as duas cores de marca do exemplo. - semanticTokens: funções condicionais, como workspace.action, independentes de telas específicas. - recipes: variantes reutilizáveis de componentes; o estado de React da aplicação controla se o formulário está inválido, pendente, com falha ou confirmado. ## Sistema de design Chakra UI: cores primitivas e funções semânticas do tema ### Use funções semânticas quando a aparência mudar bg.panel e fg.muted expressam funções de superfície e texto; gray.950 e gray.400 são os valores subjacentes. A tabela de referência mostra como eles são resolvidos nos modos claro e escuro. Na demonstração, alternar o elemento raiz do documento entre os modos claro e escuro ativa esses valores condicionais sem reescrever cada Field ou Card. Essa alternância local não inclui persistência nem integração com as preferências do sistema. As funções workspace.* são acréscimos específicos da aplicação. Elas definem uma ação em verde-azulado escuro sobre uma superfície clara e uma ação em verde-azulado pálido sobre uma superfície escura, além de uma cor de texto correspondente. Não são nomes oficiais de tokens do Chakra. Manter o par no tema evita um botão de modo escuro cujo fundo muda, mas cujo rótulo continua branco. Consulte a especificação de apoio ### A sintaxe de referência é diferente da forma abreviada dos componentes Nas definições de tokens, use a referência completa {colors.gray.950}. Em uma propriedade de estilo, bg="workspace.canvas" é resolvido na categoria de cores. Em um valor composto de CSS, o caminho completo do token é necessário novamente. Essa distinção evita que uma string literal seja confundida com uma referência ao tema. ``` ``` Referência de código ## Sistema de design Chakra UI: uma escala tipográfica legível com tokens explícitos ### Associe a escala a esta composição O título usa fontSize="2xl" e lineHeight="shorter"; o cabeçalho do cartão usa xl; o texto de apoio usa sm; e a anotação da amostra usa xs. Essas escolhas criam hierarquia sem alterar os níveis semânticos dos títulos: o título da tela é h1 e o título do formulário é h2. O conteúdo normal do formulário permanece na escala padrão do texto corrido. As pilhas padrão de texto corrido e títulos do Chakra começam com Inter e recorrem às fontes da plataforma como alternativa. A demonstração autocontida não faz solicitações externas de fontes, então a fonte alternativa renderizada pode variar conforme o sistema operacional. Se a tipografia exata for necessária, disponibilize localmente uma fonte com a licença adequada; definir um token de fonte não fornece os arquivos da fonte. Consulte a especificação de apoio ### Mantenha a tipografia e o significado independentes O indicador da etapa atual é um metadado compacto, não a instrução principal. As mensagens de campo obrigatório e de erro permanecem ao lado do campo, em uma escala legível. Alterar o espaçamento entre letras do antetítulo não afeta os rótulos do formulário, e um nome de espaço de trabalho longo permanece dentro do campo de entrada, sem alterar a largura do cartão ao redor. ## Sistema de design Chakra UI: componha Field, NativeSelect, Card e Alert ### Field representa uma relação, não apenas um campo de entrada estilizado Field.Root agrupa o rótulo, o controle, o texto de apoio e o erro. O sinalizador de campo obrigatório e RequiredIndicator comunicam a obrigatoriedade; invalid controla o estado de erro. O exemplo mantém o campo de entrada controlado por meio de React e posiciona o erro do nome do espaço de trabalho em Field.ErrorText. Os estilos de erro não são aplicados de forma independente a um parágrafo separado. O tamanho da equipe usa NativeSelect.Root, NativeSelect.Field e NativeSelect.Indicator. Isso mantém o comportamento nativo de seleção para um conjunto curto e fixo de opções. Não finge oferecer resultados remotos com busca; isso exigiria outro controle e outra interação com os dados. Consulte a especificação de apoio ### O feedback tem uma composição própria Card.Header contém a identificação do formulário, enquanto Card.Body contém o conteúdo editável. Alert.Root define o status de erro ou sucesso, Alert.Indicator fornece o ícone e Alert.Content agrupa o título e a descrição. O alerta de falha ao salvar é separado da validação do campo, pois o nome do espaço de trabalho pode ser válido mesmo quando o envio simulado falha. Consulte a especificação de apoio ## Sistema de design Chakra UI: aplique tokens de espaçamento e propriedades de estilo responsivas ### Uma política de espaçamento concreta Use gap="6" entre grupos de campos, gap="3" entre ações e gap="8" entre a coluna de progresso e o formulário. O preenchimento da página muda de p="4" para p="8" em md. Com uma raiz de 16px, esses valores correspondem a 24px, 12px, 32px, 16px e 32px. Valores baseados em rem acompanham o tamanho da fonte raiz definido pelo usuário. O cartão usa rounded="xl" e o indicador de status, rounded="md". Os diferentes raios são intencionais: o contêiner grande e o rótulo compacto têm geometrias distintas. Não interprete essas escolhas de uso como regras padrão que todas as aplicações Chakra devam seguir. Consulte a especificação de apoio ### Altere a composição em md A grade usa uma coluna abaixo de md e, a partir de md, uma coluna de progresso de 220px ao lado de um formulário flexível. minmax(0, 1fr) permite que o formulário encolha dentro da grade. A pilha de ações muda em sm. Esses valores de objeto são substituições com prioridade para dispositivos móveis, não detecção de dispositivos. ``` … … ``` Referência de código ## Sistema de design Chakra UI: conecte validação, carregamento e recuperação ### A máquina de estados da prévia Enviar um nome vazio após remover os espaços em branco define invalid e dá foco ao campo de entrada. Um envio válido passa ao estado pending, desativa a edição e exibe Button loadingText. Após o temporizador local, a caixa de seleção de falha determina se a demonstração mostra failed ou complete. Nenhum dos caminhos faz uma solicitação de rede ou armazena dados. Um resultado de falha mantém o nome controlado e o tamanho selecionado. Desativar a simulação de falha permite tentar novamente. A conclusão desativa os campos do perfil e altera o primeiro indicador de progresso; Redefinir retorna ao modo de edição. Isso demonstra a composição visual dos estados, não um contrato de persistência no backend. Consulte a especificação de apoio ### Teste os estados na ordem 1. Redefina o formulário e envie sem informar um nome; confira a mensagem do campo e o foco no campo de entrada. 2. Informe um nome, ative a simulação de falha ao salvar e envie; verifique se os valores permanecem após o erro. 3. Desative a simulação de falha e envie novamente; confira o resumo de confirmação e, em seguida, altere a aparência. ## Sistema de design Chakra UI: preserve a semântica nativa na composição ### Validação e progresso fáceis de entender O formulário usa noValidate para que este exemplo demonstre o caminho personalizado de erro do Field, em vez de interromper o fluxo com a interface de validação do navegador. O rótulo continua associado por meio do Field, e o primeiro campo inválido recebe o foco. O trabalho pendente é descrito por uma região de status dinâmica; não é indicado apenas por um ícone de carregamento. A lista de progresso usa a semântica de lista ordenada e aria-current="step" no item ativo. Ela não inclui links fictícios para telas indisponíveis. A segunda e a terceira etapas da visualização contextualizam o processo, mas não são clicáveis. Assim, os limites da demonstração ficam visíveis. Consulte a especificação de apoio ### O foco faz parte da receita de ação personalizada A variante de integração define explicitamente um contorno para :focus-visible com espaçamento externo. A aparência escura altera a função semântica do contorno junto com a da ação. A caixa de seleção e o menu de seleção nativos continuam operáveis pelo teclado. Revise também o foco, os anúncios dos campos, a ampliação e a saída do leitor de tela no aplicativo que consome o componente; um exemplo isolado de componente não comprova a acessibilidade de todo um produto de integração. ## Sistema de design Chakra UI: receitas, configuração do provider e limites de versão ### Amplie Button; defina Status localmente A variante de Button da integração é adicionada em theme.recipes.button. Variantes existentes, como outline, continuam disponíveis porque a configuração amplia defaultConfig. O indicador de status usa defineRecipe e useRecipe localmente: as variantes de estado associam current, complete e waiting a diferentes funções semânticas. É um componente do aplicativo, não uma exportação do Chakra. Uma receita de elemento único retorna um objeto de estilos. Componentes com várias partes, como Field, têm diversos slots e precisam de receitas de slots quando suas partes são tematizadas em conjunto. Aplicar uma receita semelhante à de um botão a um Field inteiro não permitiria controlar individualmente o rótulo, o controle e o erro. Consulte a especificação de apoio ### Use os arquivos fornecidos em conjunto Crie o projeto Vite React com os comandos de configuração, substitua os módulos padrão App e main pelos exemplos abaixo e adicione theme.js. O exemplo JSX usa JavaScript para que os nomes personalizados de tokens e variantes não exijam declarações TypeScript geradas. Uma adaptação de TypeScript deve executar o Chakra CLI typegen no arquivo de tema. Não importe uma configuração v2 de extendTheme nem passe theme={...} para este provider v3. A raiz real usa ChakraProvider value={system}. O exemplo intencionalmente não adiciona um segundo provider de modo de cor: a alternância local entre as classes light e dark é suficiente para esta visualização isolada, enquanto um aplicativo real pode precisar de preferência persistida e suporte à renderização no servidor. Consulte a especificação de apoio ## Sistema de design Chakra UI: verifique o tema e o formulário em conjunto ### O que este exemplo demonstra A unidade relevante para revisão é o cartão de perfil completo nas duas aparências: rótulo, campo de entrada, texto de ajuda, feedback de erro, botão durante o processamento, alerta de falha e resumo de sucesso. Um botão isolado não revela a ausência de um fundo semântico nem um controle cujo estado de erro não esteja associado ao rótulo. Compare a tabela de referência com a interface renderizada. A ação personalizada em tons de verde-azulado deve ser diferente da ação padrão com contorno; o espaçamento 6 deve separar os campos; a grade deve passar a uma coluna abaixo de md. Essas verificações relacionam as regras descritas ao resultado renderizado. ### O que não está incluído no exemplo A visualização não inclui criação de conta, envio de convite, persistência, autenticação nem integração com outra tela de integração. O temporizador é explicitamente uma simulação. Ao conectar um endpoint real, mantenha a distinção demonstrada entre o estado do campo e o estado da solicitação, substitua o temporizador pela solicitação e defina se a conclusão significa aceitação local, salvamento remoto ou ativação completa. ## Chakra UI Exemplos de componentes do sistema de design ### theme.js — tokens primitivos, funções semânticas e receitas Tema completo do aplicativo para o exemplo. As funções semânticas do workspace e a variante de integração são adições originais; defaultConfig fornece o tema padrão do Chakra. ``` import { createSystem, defaultConfig, defineConfig, defineRecipe } from '@chakra-ui/react'; export const statusRecipe = defineRecipe({ base: { display: 'inline-flex', px: '2', py: '1', rounded: 'md', fontSize: 'xs', fontWeight: 'semibold' }, variants: { state: { current: { bg: 'teal.subtle', color: 'teal.fg' }, complete: { bg: 'bg.success', color: 'fg.success' }, waiting: { bg: 'bg.muted', color: 'fg.muted' }, }, }, defaultVariants: { state: 'waiting' }, }); const config = defineConfig({ theme: { tokens: { colors: { brand: { 700: { value: '#0c5d56' }, 300: { value: '#5eead4' } } } }, semanticTokens: { colors: { 'workspace.canvas': { value: { base: '{colors.gray.50}', _dark: '{colors.gray.950}' } }, 'workspace.action': { value: { base: '{colors.brand.700}', _dark: '{colors.brand.300}' } }, 'workspace.onAction': { value: { base: '{colors.white}', _dark: '{colors.gray.950}' } }, } }, recipes: { button: defineRecipe({ variants: { variant: { onboarding: { bg: 'workspace.action', color: 'workspace.onAction', _hover: { opacity: 0.9 }, _focusVisible: { outline: '2px solid', outlineColor: 'workspace.action', outlineOffset: '2px' }, }, } } }), }, }, }); export const system = createSystem(defaultConfig, config); ``` Referência de código - Os valores da marca correspondem intencionalmente aos primitivos verde-azulados referenciados. - A receita de status é local; a variante de Button é registrada no sistema. ### App.jsx — exemplo completo de formulário nativo e estados A composição React real usada pela visualização. Inclui alternância de tema, validação com Field, menu de seleção nativo, feedback de processamento, falha simulada, confirmação e redefinição. ``` import React, { useEffect, useRef, useState } from 'react'; import { Box, Button, Card, Field, Grid, Heading, Input, NativeSelect, Stack, Text, Alert, chakra, useRecipe } from '@chakra-ui/react'; import { statusRecipe } from './theme'; function Status({ state, children }) { const recipe = useRecipe({ recipe: statusRecipe }); return {children}; } export default function App() { const [dark, setDark] = useState(false); useEffect(() => { document.documentElement.className = dark ? 'dark' : 'light'; }, [dark]); const [name, setName] = useState('Northstar Studio'); const [size, setSize] = useState('2–10'); const [invalid, setInvalid] = useState(false); const [phase, setPhase] = useState('editing'); const [simulateFailure, setSimulateFailure] = useState(false); const nameInput = useRef(null); const pending = phase === 'pending'; const complete = phase === 'complete'; const save = (event) => { event.preventDefault(); if (!name.trim()) { setInvalid(true); nameInput.current?.focus(); return; } setInvalid(false); setPhase('pending'); window.setTimeout(() => setPhase(simulateFailure ? 'failed' : 'complete'), 600); }; return CHAKRA UI · NATIVE SPECIMENSet up your workspace {complete ? 'Complete' : 'Current'}1. Workspace profileName and team size Next2. Invite your teamAvailable in the full product Optional3. Connect toolsComplete this later Scale in this specimenField gap 6 · Card padding 6
Page gap 8 · Radius xl Workspace profileThe name appears on your team's workspace.
Workspace name {setName(e.target.value);setInvalid(false);}} autoComplete='organization' /> Use a name your teammates will recognize. Enter a workspace name. Team size setSize(e.target.value)}> Used only for this local preview summary. {phase === 'failed' && Demo save failedYour values are still here. Turn off failure simulation and retry.} {complete && Profile confirmed in this preview{name.trim()} · {size} people. Nothing was sent or stored.} {pending ? 'Simulating a response. No network request is made.' : complete ? 'Profile step complete. Reset to try another state.' : 'Try an empty name, a failed save, or a different appearance.'}
Actual Chakra UI 3.37.0 components. Custom workspace semantic tokens and button recipe. Memory-only demonstration. ; } ``` Referência de código - Nenhuma solicitação é enviada; o atraso de 600ms demonstra a interface durante o processamento. - As próximas etapas são rótulos contextuais, não uma navegação funcional. ## Chakra UI Configuração do agente de IA para o sistema de design ### Ponto de partida para implementação Use uma versão do Node.js compatível com a versão instalada do Vite e com o Chakra (a documentação do Chakra recomenda Node 20 ou posterior). Este bloco separa os comandos de terminal de src/main.jsx. Os arquivos completos de tema e App estão acima; não é necessário nenhum trecho oculto de configuração do provider nem nenhum CSS externo. ``` # Terminal: create a JavaScript React application npm create vite@latest chakra-profile -- --template react cd chakra-profile npm install npm install @chakra-ui/react@3.37.0 @emotion/react # Save the two complete examples as src/theme.js and src/App.jsx. # Replace src/main.jsx with: import React from 'react'; import { createRoot } from 'react-dom/client'; import { ChakraProvider } from '@chakra-ui/react'; import { system } from './theme'; import App from './App'; createRoot(document.getElementById('root')).render(); # Start from the project directory: npm run dev ``` ### Um prompt para seu projeto ``` Use Chakra UI 3.37.0 e os arquivos theme.js e App.jsx fornecidos como ponto de partida. Preserve as funções semânticas do workspace, a composição do Field, o menu de seleção nativo e a distinção entre entrada inválida e falha no envio. Substitua apenas o temporizador simulado pela nossa API de persistência real; não indique que o perfil foi concluído antes da confirmação do resultado. Preserve o foco pelo teclado, o layout responsivo base/md e os valores para os modos claro e escuro. Explique quaisquer novos tokens ou variantes de receita. ``` ## Chakra UI Fontes e escopo do sistema de design Guia de implementação original de OpenDesign, baseado nos fundamentos documentados do Chakra UI v3. As referências padrão dos tokens são separadas das funções específicas do espaço de trabalho do aplicativo. A prévia nativa demonstra o estado local; ela não salva dados do espaço de trabalho nem implementa toda a jornada de integração. - Arquitetura Referência oficial de Chakra UI para arquitetura. - Tokens Referência oficial de Chakra UI para tokens. - Semântico Referência oficial de Chakra UI para semântica. - Cores Referência oficial de Chakra UI para cores. - Espaçamento Referência oficial de Chakra UI para espaçamento. - Tipografia Referência oficial de Chakra UI para tipografia. - Arredondamentos Referência oficial de Chakra UI para arredondamentos. - Pontos de quebra Referência oficial de Chakra UI para breakpoints. - Receitas Referência oficial de Chakra UI para receitas. - Receitas personalizadas Referência oficial de Chakra UI para receitas personalizadas. - Campo Referência oficial de Chakra UI para campos. - Button Referência oficial de Chakra UI para botões. - Cartão Referência oficial de Chakra UI para cartões. - Seleção nativa Referência oficial de Chakra UI para seleção nativa. - Alerta Referência oficial de Chakra UI para alertas. - Responsivo Referência oficial de Chakra UI para responsividade. - Instalação Referência oficial de Chakra UI para instalação. ## Recursos relacionados ao sistema de design Chakra UI ### CoreUI Uma fila de revisão do CoreUI criada com variáveis reais do tema 5.9, abas nativas, seleção em lote por caixas de seleção e uma notificação persistente que permite desfazer o último arquivamento local. ### daisyUI Um estúdio de convites nativo de CSS que demonstra os temas semânticos 5 de daisyUI, cores pareadas para conteúdo, seleção por botões de opção, controles de intervalo, validação do navegador e uma etapa de revisão em um diálogo real. ### Element Plus Use o modelo Transfer, os filtros e as opções desativadas reais de Element Plus para criar uma bancada de seleção de módulos, com cores, tamanhos de fonte e dimensões de controles verificados. - [Referência de implementação](https://chakra-ui.com/docs/components/field) - [Fonte](https://chakra-ui.com/docs/theming/colors) - [Fonte](https://chakra-ui.com/docs/theming/spacing) - [Fonte](https://chakra-ui.com/docs/theming/typography) - [Fonte](https://chakra-ui.com/docs/theming/radii) - [Fonte](https://chakra-ui.com/docs/theming/breakpoints) - [Fonte](https://chakra-ui.com/docs/theming/semantic-tokens) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/theming/overview) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/theming/semantic-tokens) - [Referência de código](https://chakra-ui.com/docs/theming/tokens) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/theming/typography) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/components/field) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/components/alert) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/theming/spacing) - [Referência de código](https://chakra-ui.com/docs/styling/responsive-design) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/components/button) - [Consulte a especificação de apoio](https://chakra-ui.com/docs/theming/recipes) - [Referência de código](https://chakra-ui.com/docs/theming/overview) - [Referência de código](https://chakra-ui.com/docs/components/field) - [Arquitetura Referência oficial de Chakra UI para arquitetura.](https://chakra-ui.com/docs/theming/overview) - [Tokens Referência oficial de Chakra UI para tokens.](https://chakra-ui.com/docs/theming/tokens) - [Semântico Referência oficial de Chakra UI para semântica.](https://chakra-ui.com/docs/theming/semantic-tokens) - [Cores Referência oficial de Chakra UI para cores.](https://chakra-ui.com/docs/theming/colors) - [Espaçamento Referência oficial de Chakra UI para espaçamento.](https://chakra-ui.com/docs/theming/spacing) - [Tipografia Referência oficial de Chakra UI para tipografia.](https://chakra-ui.com/docs/theming/typography) - [Arredondamentos Referência oficial de Chakra UI para arredondamentos.](https://chakra-ui.com/docs/theming/radii) - [Pontos de quebra Referência oficial de Chakra UI para breakpoints.](https://chakra-ui.com/docs/theming/breakpoints) - [Receitas Referência oficial de Chakra UI para receitas.](https://chakra-ui.com/docs/theming/recipes) - [Receitas personalizadas Referência oficial de Chakra UI para receitas personalizadas.](https://chakra-ui.com/docs/theming/customization/recipes) - [Campo Referência oficial de Chakra UI para campos.](https://chakra-ui.com/docs/components/field) - [Button Referência oficial de Chakra UI para botões.](https://chakra-ui.com/docs/components/button) - [Cartão Referência oficial de Chakra UI para cartões.](https://chakra-ui.com/docs/components/card) - [Seleção nativa Referência oficial de Chakra UI para seleção nativa.](https://chakra-ui.com/docs/components/native-select) - [Alerta Referência oficial de Chakra UI para alertas.](https://chakra-ui.com/docs/components/alert) - [Responsivo Referência oficial de Chakra UI para responsividade.](https://chakra-ui.com/docs/styling/responsive-design) - [Instalação Referência oficial de Chakra UI para instalação.](https://chakra-ui.com/docs/get-started/installation)