UI Themes

Four drop-in replacements for FormRenderer that render the same schema and useForm state through a specific styling system — no markup or logic changes needed to switch between them.

Tailwind UI theme

A drop-in replacement for FormRenderer using Tailwind utility classes — no custom CSS needed in your app. Requires Tailwind CSS installed and configured to scan library source files.

import { TailwindFormRenderer } from '@macrulez/vue-form-schema/ui/tailwind'

<!-- Same form, same schema — just swap the renderer -->
<TailwindFormRenderer :form="form" submit-label="Save" />

All field components are also exported individually:

import {
  TwTextField,
  TwSelectField,
  TwCheckboxField,
  TwRadioField,
  TwFileField,
  TwArrayField,
  // …
} from '@macrulez/vue-form-schema/ui/tailwind'

shadcn / PrimeVue / Naive UI themes

Three more drop-in FormRenderer replacements for popular component libraries — same schema, same useForm, just swap the renderer.

import { ShadcnFormRenderer } from '@macrulez/vue-form-schema/ui/shadcn'
import { PrimeVueFormRenderer } from '@macrulez/vue-form-schema/ui/primevue'
import { NaiveFormRenderer } from '@macrulez/vue-form-schema/ui/naive'

<ShadcnFormRenderer :form="form" submit-label="Save" />
<PrimeVueFormRenderer :form="form" submit-label="Save" />
<NaiveFormRenderer :form="form" submit-label="Save" />

Theme	What it actually is
ui/shadcn	Not a wrapper around importable shadcn-vue components — shadcn-vue ships as copy-paste source via its CLI, not as an npm component library, so there's nothing to import. This theme is Tailwind markup styled with shadcn/ui's own utility-class vocabulary (border-input, bg-primary, text-destructive, ring-ring, …). Drop it into a project that already has shadcn-vue's Tailwind theme tokens configured (npx shadcn-vue init) and it matches natively — same requirement as ui/tailwind for Tailwind CSS itself.
ui/primevue	Real wrapper components around PrimeVue's own (InputText, Select, RadioButton, Checkbox, DatePicker, Message, Button, …). Requires primevue ^4 or ^5 installed and its Vue plugin registered (app.use(PrimeVue, { theme: { preset: Aura } }) or your own preset). The file-upload dropzone's own styling ships as vue-form-schema/style.css — import it once alongside PrimeVue's own theme.
ui/naive	Real wrapper components around Naive UI's own (NInput, NSelect, NRadioGroup, NCheckbox, NDatePicker, NFormItem, NButton, …). Requires naive-ui ^2.38 installed; no global plugin needed.

File fields in the PrimeVue and Naive UI themes use a small self-contained native dropzone rather than <FileUpload> / <NUpload> — those components are built around actively uploading to a server, not just collecting File objects for later form submission.

All field components are also exported individually per theme, prefixed Sh* / Pv* / Nu* respectively (e.g. ShTextField, PvSelectField, NuCheckboxField).