@kittlekit/schema-form-tailwind

Tailwind-oriented renderer package for Kittlekit schema forms. It provides field rendering utilities, layout helpers, field arrays, a date picker, and small reusable UI helpers used by the packaged form renderer.

What This Package Is

Use this package when you want:

• a ready-made visual renderer for schema-driven forms
• Tailwind-based layout and field helpers
• a form UI layer on top of schema-form-core and schema-form-react

This package is still intentionally composable: it accepts injected UI primitives instead of forcing one hardcoded app shell.

Install

npm install @kittlekit/schema-form-tailwind @kittlekit/schema-form-react @kittlekit/schema-form-core react react-dom tailwindcss

Depending on which components you use, you may also need:

• @base-ui/react
• class-variance-authority
• clsx
• tailwind-merge
• date-fns
• react-day-picker
• lucide-react

Main Exports

• TailwindFieldRenderer
• FieldArray
• FieldErrors
• LoadingOverlay
• DatePicker
• grid helpers such as getColSpanClass
• small reusable UI helpers such as Button, Popover, cn

Quick Start

import { TailwindFieldRenderer } from "@kittlekit/schema-form-tailwind"

In most apps, you inject your own UI primitives into the renderer instead of using the package in total isolation.

Renderer Pattern

The package is designed around injected components.

For example, TailwindFieldRenderer expects you to provide primitives for:

• inputs
• selects
• multiselect
• checkbox/switch
• radio group
• autocomplete

This keeps the package reusable while preserving the current visual direction.

Typical Use Cases

App wrapper package

Your app can create a tiny wrapper that injects your design system primitives and keeps the rest reusable.

Shared internal design system

If several apps share the same UI primitives, this package can be the shared renderer layer.

Relationship to Other Packages

schema-form-core -> schema-form-react -> schema-form-tailwind

Optional addons

• @kittlekit/schema-form-upload-next
• @kittlekit/schema-form-map-leaflet

Those remain separate so every consumer does not have to pull in upload or map runtime dependencies.

Out of Scope

This package intentionally does not include:

• your app-specific file upload transport
• your map provider configuration
• auth/session coupling

Runtime Notes

• React package
• Tailwind-oriented styling
• ESM runtime with JS + typings

Publish

npm run build --workspace @kittlekit/schema-form-tailwind
npm publish --workspace @kittlekit/schema-form-tailwind --access public

Examples

• smoke app: sandbox/schema-form-smoke
• field renderer wrapper: web/src/components/form/FieldRenderer.tsx

Release Notes

0.1.1

• packaged the Tailwind renderer layer, field arrays, and date picker
• validated external installation in a clean smoke app