Adapters

Install

npm install @formura/core @formura/adapters

Tailwind setup

Adapter components use Tailwind utility classes. Add the package to your Tailwind content scan:

/* app/globals.css */
@import "@formura/adapters/tailwind.css";

Default shadcn adapter

Import the pre-built adapter and pass it to createForm:

import { createForm } from "@formura/core";
import shadcnAdapter from "@formura/adapters/shadcn";

const { Form } = createForm({
  schema,
  adapter: shadcnAdapter,
  action,
});

Custom adapter

Pass a partial components map to swap primitives from your local shadcn install. Unspecified keys keep the bundled defaults:

import { createShadcnAdapter } from "@formura/adapters/shadcn";
import { Input } from "@/components/ui/input";

const adapter = createShadcnAdapter({
  components: {
    Input,
  },
});

const { Form } = createForm({ schema, adapter, action });

Leaf overrides cover Input, Textarea, Checkbox, and the Select / OTP families. Replace DatePickerField, TimePickerField, DateTimePickerField, or FieldWrapper as a whole — inner Button, Calendar, Popover, and Label are not injected. createShadcnAdapter() with no arguments matches the default export.

Bundled primitives

The shadcn adapter ships with these components out of the box:

• Input (text, password, number)
• Textarea
• Select
• Checkbox
• Input OTP
• Label + field wrapper

FormAdapter interface

Build your own adapter by implementing:

type FormAdapter = {
  renderField: (props: AdapterFieldProps) => ReactNode;
  FieldWrapper?: ComponentType<FieldWrapperProps>;
};

// AdapterFieldProps includes:
// name, value, onChange, onBlur, disabled, error, label, meta, fieldSchema

Use meta.widget and meta.options from inferFieldMeta to decide which component to render. See the widget reference for inference rules.