shadcn/ui

The @form-wire/shadcn package provides createShadcnMapper — a plug-and-play adapter that bridges your shadcn/ui components to Form Wire's mapper interface.

Installation

bun add @form-wire/shadcn

Usage

Pass your shadcn/ui components to createShadcnMapper and get back a FormWireMapper:

import { createShadcnMapper } from "@form-wire/shadcn";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";
import {
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from "@/components/ui/form";

export const shadcnMapper = createShadcnMapper({
  Input,
  Textarea,
  Checkbox,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  Button,
  Label,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
});

Then use it with FormWireProvider:

<FormWireProvider mapper={shadcnMapper}>
  <Contact.Form action={submitContact} />
</FormWireProvider>

Required Components

Only Input is required — it renders text, email, number, date, and file inputs.

Optional Components

Component	Affects	Fallback
`Textarea`	Multiline string fields	Uses `Input`
`Checkbox`	Boolean fields	Native `<input type="checkbox">`
`Select` + sub-components	Select fields	Native `<select>`
`Button`	Submit button	Native `<button>`
`Label`	Field labels	Native `<label>`
`FormItem` + `FormLabel` + `FormControl` + `FormDescription` + `FormMessage`	Field wrapper layout	Basic div layout
`Alert`	Form messages	Native `<p>`
`Skeleton`	Loading states	Hidden (no display)
`Fieldset`	Group wrapper	Native `<fieldset>`

How It Works

createShadcnMapper returns a FormWireMapper that maps Form Wire's field props to shadcn/ui component props
For Radix Select: synthesizes a change event from onValueChange to bridge to Form Wire's onChange
For Checkbox: uses onCheckedChange with boolean values
The FormItem pattern uses shadcn's form layout (label, control, description, error message)

Partial Setup

You don't need all components. Only pass what you have:

const mapper = createShadcnMapper({
  Input,
  Button,
  Label,
});

Missing components fall back to native HTML elements. Mapper keys that have no corresponding component are simply omitted (Form Wire uses its own fallbacks).