Templates Customizados

O SchemaForms vem com vários temas visuais built-in. Você pode usar um deles como está, sobrescrever suas variáveis CSS ou registrar um template completamente customizado.

Templates disponíveis

Chave	Descrição
moderno	Limpo e neutro — boa base para customização
minimalista	Flat sem cartões — máxima leveza
card	Destaque em cards com sombra
banner	Bordas evidentes, estilo clássico
acampamento	Fundo escuro com glassmorphism, tom alaranjado
acampamento_imersivo	Versão imersiva do tema acampamento
corporativo	Paleta cinza formal, bordas evidentes
festival	Fundo escuro com gradientes vibrantes
webinar	Azul aço, profissional
retiro	Verde esmeralda, natural
conferencia	Índigo, sofisticado
workshop	Âmbar, energético
social	Esmeralda vibrante
gala	Dourado elegante

Aplicando um template

Passe a chave do template para o FormRenderer:

<FormRenderer schema={schema} template="acampamento" onComplete={...} />

Ou envolva tudo em TemplateProvider:

import { TemplateProvider, getTemplateConfig } from '@schema-forms-data/templates';

const config = getTemplateConfig('corporativo');

<TemplateProvider config={config}>
  <FormRenderer schema={schema} onComplete={...} />
</TemplateProvider>

Variáveis CSS disponíveis

Cada template injeta estas variáveis CSS via TemplateProvider:

--t-primary        /* cor primária */
--t-primary-hover  /* hover da primária */
--t-accent         /* cor de destaque */
--t-bg             /* fundo geral */
--t-surface        /* fundo de cards/containers */
--t-text           /* texto principal */
--t-text-muted     /* texto secundário / labels */
--t-border         /* bordas de inputs */
--t-error          /* vermelho de erro */

Template no Builder

O BuilderProvider também aceita initialTemplateId para que o preview do canvas reflita o que o usuário final verá:

<BuilderProvider initialTemplateId="festival" onSchemaChange={...}>
  <Canvas />
</BuilderProvider>

Consultando templates registrados

import {
  getAllTemplates,
  getTemplateConfig,
} from "@schema-forms-data/templates";

// Todos os templates disponíveis
const todos = getAllTemplates();

// Config de um template específico
const config = getTemplateConfig("moderno");
// { id, displayName, colors, layout, typography, wrapperClass }