Uma referência do Mantine 9, estruturada em torno de uma tabela nativa de participantes e um painel lateral de agendamento. Consulte as escalas reais do tema, conecte useForm a TextInput, Select, Checkbox e DatePickerInput e teste a validação antes de adicionar um registro local.
Guia OpenDesign9 capítulos32 entradas de referênciaGuia de aplicação original
01
Prévia da interface do sistema de design Mantine
Abra o painel lateral, acione a validação do campo, selecione um estudo e uma data, adicione um participante local e retire o consentimento de exemplo.
Pacotes nativos core, form e dates do Mantine 9.6.3 com React 19. Aparência clara forçada e tema ciano; somente estado local. · Referência de implementação
02
Referência de design do sistema de design Mantine
Valores DEFAULT_THEME selecionados, verificados no @mantine/core 9.6.3. Os equivalentes numéricos em pixels pressupõem uma raiz de 16px e theme.scale=1; os tokens escalados são resolvidos por meio de --mantine-scale. A cor primária ciano, o tom 8 e o raio md são substituições explícitas da aplicação.
Sistema de design Mantine: temas e limites entre pacotes de Mantine
Um provedor, três pacotes de recursos
O exemplo usa core para a interface, form para validação e vinculação, e dates para o campo de calendário. MantineProvider recebe as substituições de createTheme. Os estilos de core CSS e dates CSS são importados; carregar apenas o componente React não basta para reproduzir o calendário estilizado.
O tema seleciona ciano com primaryShade 8 e defaultRadius md. Button.extend define botões pequenos como padrão da aplicação, enquanto TextInput.extend seleciona controles médios. São configurações intencionais mostradas no código, não uma afirmação de que todo produto Mantine deva usá-las.
Sistema de design Mantine: use índices da paleta e funções de cor resolvidas
Uma paleta ordenada não é uma lista de amostras de cor sem relação entre si
As cores de Mantine são matrizes de tons indexadas. Este exemplo usa cyan.0 para um painel de resumo discreto, cyan.9 para texto de destaque e o tom primário configurado para ações preenchidas. A referência apresenta toda a escala de ciano usada neste tema.
O selo de confirmação da tabela usa uma variante de ciano claro; o status de retirada usa laranja. Os status também são identificados por texto. A retirada altera o estado do consentimento, mas mantém visível a sessão anterior, evitando que uma mudança de cor apague o histórico sem aviso.
A propriedade color do componente pode fazer referência a uma paleta nomeada; definir separadamente um fundo hexadecimal bruto pode ignorar algumas decisões de variante. Ao usar CSS simples, prefira as variáveis geradas para decisões de tema recorrentes. O mapeamento de variáveis CSS do exemplo explica quais valores permanecem vinculados à escala e à cor primária.
Sistema de design Mantine: aplique as escalas exportadas de fontes e títulos
Reproduza a hierarquia
A tabela usa texto sm para nomes e rótulos de estudos e xs para identificadores e datas. Title order={1} usa a escala h1; o painel lateral tem um título semântico h2, renderizado com size="h3" para uma hierarquia visual mais compacta. Essas escolhas não dependem do rótulo nem do texto auxiliar fornecidos pelos componentes de campo.
A pilha de fontes da plataforma de Mantine não exige o download de fontes remotas. Os valores de fonte escalados incluem --mantine-scale; os valores em pixels da referência pressupõem escala 1. Não considere esses equivalentes em pixels invariáveis se a aplicação alterar sua escala.
Sistema de design Mantine: vincule useForm a componentes de entrada reais
A validação pertence ao modelo do formulário
initialValues inclui nome, estudo, data anulável e consentimento booleano. validate retorna uma string de erro ou null para os campos de nome, data e consentimento. form.onSubmit executa essa validação antes de adicionar a linha local. Não é necessário criar separadamente um conjunto de rótulos de erro estilizados manualmente.
TextInput e DatePickerInput recebem getInputProps para o caminho do campo. Checkbox também especifica type:"checkbox" para que o valor checked seja vinculado corretamente. Select usa uma lista fixa de estudos e allowDeselect={false}; o fluxo não permite deixar o estudo vazio.
Sistema de design Mantine: controle a densidade e o excesso de conteúdo no limite do componente
Mantenha a tabela em sua própria área rolável
Table.ScrollContainer usa minWidth={580}, preservando quatro colunas legíveis em telas estreitas. O documento permanece dentro da janela de visualização; somente a área de dados rola horizontalmente quando necessário. horizontalSpacing="lg" e verticalSpacing="md" usam o espaçamento do tema em vez de preenchimentos de célula independentes.
Os três cartões de resumo usam SimpleGrid com uma coluna base e três colunas a partir de sm. O recuo da página também muda de md para xl. São objetos de estilo responsivos, enquanto a largura mínima da tabela é uma escolha explícita de conteúdo.
Sistema de design Mantine: diferencie inscrição inválida de retirada de consentimento
O exemplo tem duas alterações distintas
O formulário de agendamento não pode adicionar uma linha até que o nome, a data da sessão e o consentimento de exemplo passem pela validação. Quando a inclusão local é bem-sucedida, o drawer é fechado, um registro é adicionado e os totais do resumo são atualizados. O alerta informa que nenhum registro de pesquisa foi armazenado.
A ação de revogar altera apenas o status da linha selecionada e desativa a ação dessa linha. A data continua visível no histórico, enquanto o total de agendamentos exclui as linhas com consentimento revogado. Esta é uma política declarada para a prévia, não uma regra real de retenção de dados de pesquisa.
Formulário inválido: exiba erros nos campos e mantenha o drawer aberto.
Entrada local aceita: adicione a linha uma única vez e redefina o próximo rascunho.
Consentimento de exemplo revogado: mantenha o registro e desative uma nova revogação.
Mantine Faça o drawer e a semântica dos campos trabalharem em conjunto no sistema de design
Foco e rótulos
O drawer recebe um título e usa o gerenciamento de foco nativo. O campo de nome tem data-autofocus. Todos os controles do formulário têm um rótulo visível; as mensagens de validação vêm da propriedade error vinculada. O nome acessível do botão de revogação inclui o participante, para que vários rótulos visuais idênticos possam ser diferenciados.
Fechar o drawer cancela o rascunho neste exemplo: ao abrir Adicionar participante, o formulário é redefinido. O calendário é um popup nativo de Mantine dentro do drawer. Teste a interação pelo teclado junto com a armadilha de foco ao redor, em vez de presumir que dois componentes acessíveis individualmente sempre funcionarão bem em conjunto.
Mantine Instale pacotes com versões alinhadas e ambas as folhas de estilo do sistema de design
A configuração completa está incluída
Use os comandos de terminal abaixo, substitua App.jsx pela composição completa e monte-a com o main.jsx fornecido. As versões dos quatro pacotes Mantine estão alinhadas intencionalmente. App.jsx contém o provider e o tema, portanto, não é necessário nenhum arquivo de provider oculto.
Não copie um exemplo de data de outra versão principal sem verificar o tipo do valor. Mantenha a data inicial e a validação do formulário compatíveis com o DatePickerInput API real. Este exemplo foi criado com as versões de pacote especificadas, em vez de se basear em um tutorial antigo.
Instale core, hooks, form, dates e a dependência de dates dayjs.
Importe core/styles.css e dates/styles.css uma única vez no limite da aplicação.
Teste o formulário, adicione um registro com data e depois confira a tabela e o resultado da revogação.
Mantine Verifique o calendário, o formulário e a tabela como uma unidade no sistema de design
O que testar
Envie o drawer vazio para exibir os erros de nome, data e consentimento. Preencha um nome, selecione um dia no calendário e confirme o consentimento de exemplo antes de enviar novamente. O novo participante deve aparecer com a data selecionada e um ID de prévia estável. Em seguida, revogue o consentimento desse participante e observe a linha e o resumo.
O modelo de dados é intencionalmente simples e mantido apenas na memória. Não há recrutamento para estudos, coleta de consentimento, persistência no servidor nem conversão de fuso horário. O valor concreto deste exemplo está na integração com o pacote nativo e no comportamento visível dos controles, não em sugerir a existência de um backend de gerenciamento de pesquisas.
Exemplos de componentes do sistema de design Mantine
App.jsx — provider, tema, tabela e drawer de agendamento
Exemplo completo e nativo de Mantine. Inclui substituições do tema, validação com useForm, DatePickerInput, atualizações da tabela e alteração do status do consentimento.
jsx
import React, {useState} from 'react';
import {MantineProvider, createTheme, Box, Group, Stack, Title, Text, Button, Paper, Badge, Table, Drawer, TextInput, Select, Checkbox, Alert, SimpleGrid} from '@mantine/core';
import {useForm} from '@mantine/form';
import {DatePickerInput} from '@mantine/dates';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
const theme=createTheme({primaryColor:'cyan',primaryShade:8,defaultRadius:'md',components:{Button:Button.extend({defaultProps:{size:'sm'}}),TextInput:TextInput.extend({defaultProps:{size:'md'}})}});
function Tracker(){
const[opened,setOpened]=useState(false),[notice,setNotice]=useState(''),[rows,setRows]=useState([{name:'Alex Morgan',study:'Navigation study',date:'2026-10-14',status:'Confirmed'},{name:'Sam Rivera',study:'Editor study',date:'2026-10-16',status:'Confirmed'}]);
const form=useForm({initialValues:{name:'',study:'Navigation study',date:null,consent:false},validate:{name:v=>v.trim().length<2?'Enter a name with at least two characters.':null,date:v=>!v?'Choose a session date.':null,consent:v=>!v?'Confirm consent before scheduling this example.':null}});
const submit=values=>{setRows([...rows,{name:values.name.trim(),study:values.study,date:values.date,status:'Confirmed'}]);setOpened(false);setNotice('Participant added in this browser only. No research record was stored.');form.reset();};
return <Box p={{base:'md',sm:'xl'}} bg='gray.0'><Box maw={1040} mx='auto'>
<Group justify='space-between' align='flex-start' mb='xl'><Box><Text c='cyan.9' fw={700} size='xs' tt='uppercase' mb='xs'>Mantine · Research operations</Text><Title order={1}>Participant sessions</Title><Text c='dimmed' mt='xs'>Consent and scheduling stay visible in the same working view.</Text></Box><Button onClick={()=>{form.reset();setOpened(true)}}>Add participant</Button></Group>
<SimpleGrid cols={{base:1,sm:3}} mb='xl'><Paper withBorder p='lg'><Text size='sm' c='dimmed'>In this preview</Text><Text fz={32} fw={700}>{rows.length}</Text><Text size='sm'>Participant records</Text></Paper><Paper withBorder p='lg'><Text size='sm' c='dimmed'>Scheduled</Text><Text fz={32} fw={700}>{rows.filter(r=>r.status==='Confirmed').length}</Text><Text size='sm'>With confirmed example consent</Text></Paper><Paper withBorder p='lg' bg='cyan.0'><Text size='sm' c='cyan.9' fw={600}>Working theme</Text><Text mt='xs' size='sm'>cyan.8 action · radius md<br/>spacing lg · body md</Text></Paper></SimpleGrid>
{notice&&<Alert title='Local change' color='cyan' mb='md' withCloseButton onClose={()=>setNotice('')}>{notice}</Alert>}
<Paper withBorder radius='md'><Table.ScrollContainer minWidth={580}><Table verticalSpacing='md' horizontalSpacing='lg' highlightOnHover><Table.Thead><Table.Tr><Table.Th>Participant</Table.Th><Table.Th>Study / session</Table.Th><Table.Th>Consent</Table.Th><Table.Th>Action</Table.Th></Table.Tr></Table.Thead><Table.Tbody>{rows.map((r,i)=><Table.Tr key={i}><Table.Td><Text fw={600} size='sm'>{r.name}</Text><Text size='xs' c='dimmed'>P-{String(i+1).padStart(3,'0')}</Text></Table.Td><Table.Td><Text size='sm'>{r.study}</Text><Text size='xs' c='dimmed'>{r.date}</Text></Table.Td><Table.Td><Badge variant='light' color={r.status==='Confirmed'?'cyan':'orange'}>{r.status}</Badge></Table.Td><Table.Td><Button variant='subtle' color='gray' disabled={r.status==='Withdrawn'} aria-label={'Withdraw consent for '+r.name} onClick={()=>{setRows(rows.map((x,j)=>j===i?{...x,status:'Withdrawn'}:x));setNotice('Consent withdrawn in the preview. The prior session remains visible as history.')}}>Withdraw</Button></Table.Td></Table.Tr>)}</Table.Tbody></Table></Table.ScrollContainer></Paper>
<Text size='xs' c='dimmed' mt='lg'>Native Mantine 9.6.3: Table, Drawer, useForm, DatePickerInput, and input error styles. All records are memory-only examples.</Text>
<Drawer opened={opened} onClose={()=>setOpened(false)} position='right' size='md' title={<Title order={2} size='h3'>Schedule a participant</Title>}><form onSubmit={form.onSubmit(submit)} noValidate><Stack gap='lg'><Text size='sm' c='dimmed'>All fields below belong to this one study enrollment. Closing discards the draft.</Text><TextInput label='Participant name' placeholder='Jules Davis' data-autofocus {...form.getInputProps('name')}/><Select label='Study' data={['Navigation study','Editor study']} allowDeselect={false} {...form.getInputProps('study')}/><DatePickerInput label='Session date' placeholder='Choose a date' valueFormat='DD MMM YYYY' defaultDate='2026-10-01' {...form.getInputProps('date')}/><Checkbox label='Consent is confirmed for this example study' {...form.getInputProps('consent',{type:'checkbox'})}/><Button type='submit'>Add to preview</Button><Text size='xs' c='dimmed'>This checkbox demonstrates validation; it is not a research consent collection process.</Text></Stack></form></Drawer>
</Box></Box>;
}
export default function App(){return <MantineProvider theme={theme} forceColorScheme='light'><Tracker/></MantineProvider>}
A caixa de seleção de consentimento é uma condição de validação do exemplo, não um fluxo real de coleta de consentimento.
04
Configuração do agente de IA para o sistema de design Mantine
Ponto de partida para implementação
Use uma versão do Node compatível com o template Vite selecionado. O código-fonte inclui o provider, o tema e as importações das folhas de estilo; não é necessário um backend nem um CSS personalizado para o fluxo demonstrado.
texto
# Terminal
npm create vite@latest participant-demo -- --template react
cd participant-demo
npm install
npm install @mantine/[email protected] @mantine/[email protected] @mantine/[email protected] @mantine/[email protected] dayjs
# Save the complete example as src/App.jsx.
# Replace src/main.jsx with:
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')).render(<App/>);
# Terminal
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Use a composição fornecida de Mantine 9.6.3 e mantenha alinhadas as versões de core/form/dates. Preserve o provider, as duas importações de CSS, os vínculos de getInputProps, o tipo do valor de data e o limite de rolagem da tabela. Substitua as alterações locais de inscrição pelo serviço real somente depois de definir as políticas de consentimento e persistência. Diferencie revogação de exclusão e mantenha legíveis os erros dos campos e o foco do drawer.
05
Fontes e escopo do sistema de design Mantine
Exemplo original de OpenDesign usando Mantine 9.6.3. Os valores padrão do tema são diferenciados das substituições de ciano e formas da aplicação. A prévia nativa demonstra apenas registros locais e validação, sem coletar consentimento nem salvar dados de pesquisa.
