Material UI

Generated UI previewMATERIAL UI

Every field renders through the material-ui field adapter, wrapped in a ThemeProvider — text, email, textarea, select, radio group, and switch all map to real MUI controls.

Install:

BASH

npm install @vibeflui/material-ui @mui/material @emotion/react @emotion/styled

MaterialUIField maps a wide range of field.type values to real Material UI controls — this example spans several of them to show the range, not just select. The app should also provide a MUI ThemeProvider (and usually CssBaseline) as normal.

File structure

TXT

schemas/
  users/
    material-ui-user-form.schema.ts
lib/
  vibeflui/
    registry.tsx
app/
  users/
    new/
      page.tsx

Schema file

schemas/users/material-ui-user-form.schema.ts

export const materialUIUserFormSchema = {
  resource: "users",
  identity: { key: "id", param: "id" },
  table: { enabled: false },
  form: {
    mode: "page",
    fields: [
      { name: "name", label: "Name", type: "text", adapter: "material-ui", required: true },
      { name: "email", label: "Email", type: "email", adapter: "material-ui", required: true },
      { name: "bio", label: "Bio", type: "textarea", adapter: "material-ui" },
      {
        name: "role",
        label: "Role",
        type: "select",
        adapter: "material-ui",
        required: true,
        options: [
          { label: "Admin", value: "admin" },
          { label: "Editor", value: "editor" },
          { label: "Viewer", value: "viewer" }
        ]
      },
      {
        name: "plan",
        label: "Plan",
        type: "radio-group",
        adapter: "material-ui",
        options: [
          { label: "Free", value: "free" },
          { label: "Pro", value: "pro" }
        ]
      },
      { name: "notifyByEmail", label: "Notify by email", type: "switch", adapter: "material-ui" }
    ]
  },
  actions: {
    create: { enabled: true, label: "Save user", handler: "users.create" }
  },
  registry: {
    fieldAdapters: ["material-ui"],
    actionHandlers: ["users.create"]
  },
  feedback: {
    mode: "inline"
  }
} as const;

Registry file

lib/vibeflui/registry.tsx

TSX

import { createRegistry } from "@vibeflui/core";

export const vibefluiRegistry = createRegistry({
  actionHandlers: {
    "users.create": async ({ values }) => ({
      status: true,
      code: 200,
      message: `${String(values?.name ?? "User")} saved with the Material UI field adapter`,
      data: values
    })
  }
});

Page file

app/users/new/page.tsx

TSX

"use client";

import { useState } from "react";
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
import {
  FluiKitFeedback,
  FluiKitForm,
  FluiKitProvider,
  executeOperation,
  normalizeSchema,
  type FluiKitFeedbackMessage
} from "@vibeflui/core";
import { materialUIPlugin } from "@vibeflui/material-ui";
import { materialUIUserFormSchema } from "@/schemas/users/material-ui-user-form.schema";
import { vibefluiRegistry } from "@/lib/vibeflui/registry";

const schema = normalizeSchema(materialUIUserFormSchema);
const theme = createTheme();

export default function NewUserPage() {
  const [feedback, setFeedback] = useState<FluiKitFeedbackMessage | null>(null);

  const handleCreateUser = async (values: Record<string, unknown>) => {
    const result = await executeOperation({
      schema,
      operation: "create",
      values,
      registry: vibefluiRegistry
    });

    setFeedback({
      status: "success",
      title: "Saved",
      message: String((result.data as { message?: unknown } | undefined)?.message ?? "User saved")
    });
  };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <FluiKitProvider plugins={[materialUIPlugin]} registry={vibefluiRegistry}>
        <FluiKitFeedback schema={schema} mode="inline" feedback={feedback} onClose={() => setFeedback(null)} />
        <FluiKitForm schema={schema} mode="create" onSubmit={handleCreateUser} />
      </FluiKitProvider>
    </ThemeProvider>
  );
}

plugins={[materialUIPlugin]} registers the material-ui field adapter on the same FluiKitProvider this page renders.

Supported field behavior

The adapter handles text-like fields, textarea/json/code/markdown text areas, password, number/range, email, select, multiselect/tags, switch, checkbox, radio/radio-group, and checkbox-group — see Material UI for the full reference.

Exports include createMaterialUIPlugin, materialUIPlugin, and MaterialUIField.