Material UI Plugin

@vibeflui/material-ui registers a Material UI field adapter and adapter metadata.

Install

BASH

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

@mui/material is an optional peer dependency in package metadata, but the adapter needs it to render Material UI controls. Material UI apps usually also install Emotion packages.

Public exports

Export	Purpose
`createMaterialUIPlugin`	Creates the Material UI plugin.
`materialUIPlugin`	Prebuilt plugin instance.
`MaterialUIField`	Field adapter component.

Registered slots

Slot	Keys
`adapters`	`material-ui`
`fieldAdapters`	`material-ui`
`messages`	`loadError`, `submitError`

Minimal setup

TSX

import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { createMaterialUIPlugin } from "@vibeflui/material-ui";

const theme = createTheme();
const materialUIPlugin = createMaterialUIPlugin();

export function UsersPage() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <FluiKitProvider plugins={[materialUIPlugin]}>
        <FluiKit schema={usersSchema} />
      </FluiKitProvider>
    </ThemeProvider>
  );
}

Schema usage

export const usersSchema = {
  resource: "users",
  adapter: "material-ui",
  form: {
    fields: [
      { name: "name", label: "Name", type: "text", adapter: "material-ui" },
      { name: "role", label: "Role", type: "select", adapter: "material-ui", options: [{ label: "Admin", value: "admin" }] },
      { name: "enabled", label: "Enabled", type: "switch", adapter: "material-ui" }
    ]
  },
  registry: {
    fieldAdapters: ["material-ui"]
  }
} as const;

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.

Plugin overrides

createMaterialUIPlugin() accepts optional renderers, components, fieldAdapters, and messages. Use this when the app needs Material UI form controls plus project-specific renderers or components.

import { createMaterialUIPlugin } from "@vibeflui/material-ui";
import { PaymentStateBadge } from "@/components/vibeflui/renderers/payments/PaymentStateBadge";

export const materialUIPlugin = createMaterialUIPlugin({
  renderers: {
    PaymentStateBadge
  }
});

Common mistakes

Use the plugin exports shown above.
Use adapter key material-ui, not mui.