@schema-forms-data/templates

Visual templates, CSS variable injection and preset field blocks for SchemaForms.

Install

npm install @schema-forms-data/templates @schema-forms-data/core

TemplateProvider

Wraps your form and injects CSS custom properties (--t-primary, --t-bg, etc.) based on the chosen template:

import { TemplateProvider } from "@schema-forms-data/templates";

<TemplateProvider template="moderno">
  {/* your form goes here */}
</TemplateProvider>;

Available templates

| Key | Style | | --------------- | ------------------------------------- | | moderno | Clean, white background, blue primary | | escuro | Dark surface, light text | | oceano | Deep blue gradient | | floresta | Green tones | | coral | Warm coral/salmon | | aurora | Purple-pink gradient | | glassmorphism | Frosted glass effect | | minimalista | Ultra-clean minimal | | …and more | See TEMPLATE_REGISTRY |

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

const all = getAllTemplates(); // [{ key, name, ... }, ...]
const config = getTemplateConfig("escuro");

Preset blocks

Pre-configured groups of fields to quickly scaffold common form sections:

import { PRESET_BLOCKS, getPresetById } from "@schema-forms-data/templates";

const personalBlock = getPresetById("preset_personal");
// Returns: PresetBlock with fields for nome, email, cpf, data_nascimento, etc.

Available presets: preset_personal, preset_address, preset_emergency, preset_health, preset_responsible, preset_participation, preset_payment.

License

MIT © SchemaFormsData