npm package: @kittlekit/schema-form-tailwind
Description: Tailwind-rendered schema form components for bootstrap schema forms
Latest version: 0.1.2

# @kittlekit/schema-form-tailwind

[![npm version](https://img.shields.io/npm/v/@kittlekit/schema-form-tailwind.svg)](https://www.npmjs.com/package/@kittlekit/schema-form-tailwind)
[![license: MIT](https://img.shields.io/badge/license-MIT-green.svg)](../../LICENSE)

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

```bash
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

```tsx
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

```text
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

```bash
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