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

Use createShadcnAdapter() when you need to swap primitives from your local shadcn install:

import { createShadcnAdapter } from "@formura/adapters/shadcn";

const adapter = createShadcnAdapter();

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

Extend createShadcnAdapter in your app to override individual widget renderers or the field wrapper.

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.