Mantine Plugin

@vibeflui/mantine registers a Mantine field adapter and adapter metadata.

Install

BASH

npm install @vibeflui/core @vibeflui/mantine @mantine/core

The adapter source expects the app to provide Mantine setup.

TSX

import { MantineProvider } from "@mantine/core";
import "@mantine/core/styles.css";

Public exports

Export	Purpose
`createMantinePlugin`	Creates the Mantine plugin.
`mantinePlugin`	Prebuilt plugin instance.
`MantineField`	Field adapter component.

Registered slots

Slot	Keys
`adapters`	`mantine`
`fieldAdapters`	`mantine`
`messages`	`loadError`, `submitError`

Minimal setup

TSX

import { MantineProvider } from "@mantine/core";
import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { createMantinePlugin } from "@vibeflui/mantine";
import "@mantine/core/styles.css";

const mantinePlugin = createMantinePlugin();

export function UsersPage() {
  return (
    <MantineProvider>
      <FluiKitProvider plugins={[mantinePlugin]}>
        <FluiKit schema={usersSchema} />
      </FluiKitProvider>
    </MantineProvider>
  );
}

Schema usage

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

Supported field behavior

The adapter handles text-like fields, textarea/json/code/markdown text areas, password, number/range, select, multiselect/tags, switch, checkbox, radio/radio-group, checkbox-group, and email.

Plugin overrides

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

import { createMantinePlugin } from "@vibeflui/mantine";
import { ProjectHealthBadge } from "@/components/vibeflui/renderers/projects/ProjectHealthBadge";

export const mantinePlugin = createMantinePlugin({
  renderers: {
    ProjectHealthBadge
  }
});

Common mistakes

Use the plugin exports shown above.
Do not omit Mantine's provider/styles in real previews.