Integrations
DaisyUI
Use Form Wire with DaisyUI components
The @form-wire/daisyui package provides daisyUiMapper and createDaisyUiMapper using react-daisyui components.
Installation
bun add @form-wire/daisyui react-daisyui daisyui@^4.12.24react-daisyui@5 targets DaisyUI v4. Load DaisyUI through Tailwind, or import the packaged CSS in an example app:
import "daisyui/dist/full.css";Usage
"use client";
import { daisyUiMapper } from "@form-wire/daisyui";
import { FormWireProvider } from "@form-wire/react";
export function Providers({ children }: { children: React.ReactNode }) {
return <FormWireProvider mapper={daisyUiMapper}>{children}</FormWireProvider>;
}Or scope it to one generated form:
<Contact.Form mapper={daisyUiMapper} action={submitContact} />Component Overrides
import { Input } from "react-daisyui";
import { createDaisyUiMapper, type DaisyInputProps } from "@form-wire/daisyui";
function AppInput(props: DaisyInputProps) {
return <Input bordered color="primary" {...props} />;
}
export const mapper = createDaisyUiMapper({
Input: AppInput,
});Mapped Components
| Form Wire key | DaisyUI component |
|---|---|
string | Input, or Textarea for multiline fields |
boolean | Checkbox |
select | Select and Select.Option |
file | FileInput |
field | Form.Label plus DaisyUI label classes |
group | Native fieldset with DaisyUI classes |
submit | Button |
status | Loading and Skeleton |
message | Alert |
The exported prop types are derived from react-daisyui with ComponentProps<typeof DaisyComponent>.