FluiKitProvider

FluiKitProvider supplies runtime context for VibeFlui components.

It can be nested. A child provider merges parent context with plugin output and direct provider props.

Props

FluiKitProviderProps extends the runtime registry shape and adds:

type FluiKitProviderProps = FluiKitRuntimeRegistry & {
  children: ReactNode;
  plugins?: FluiKitPlugin[];
  registry?: FluiKitRuntimeRegistry;
  providers?: Record<string, FluiKitDataProvider>;
  messages?: Record<string, string>;
  permissionContext?: FluiKitPermissionContext;
};

Context value

The context value contains:

Key	Purpose
`registry`	Merged runtime registry.
`providers`	Named data providers.
`messages`	Default messages plus parent, plugin, and local messages.
`permissionContext`	Permission context object used by permission resolvers.
`plugins`	Applied plugin metadata.
`pluginWarnings`	Plugin conflict warnings.
`pluginThemes`	Theme presets contributed by plugins.
`pluginAdapters`	Adapter presets contributed by plugins.
`inspectorPanels`	Inspector panels contributed by plugins.

Merge order

The provider resolves runtime context in this practical order:

parent provider context
applied plugins
registry prop
direct registry slot props such as components, renderers, fieldAdapters, and actionHandlers

Messages follow:

default VibeFlui messages
parent messages
plugin messages
local messages prop

Providers follow:

parent providers
plugin providers
local providers prop

Basic setup

lib/vibeflui/registry.ts

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

export const registry = createRegistry({
  actionHandlers: {
    "users.archive": async ({ row }) => ({
      status: true,
      code: 200,
      message: `${String(row?.name ?? "User")} archived`
    })
  }
});

app/providers.tsx

TSX

"use client";

import { FluiKitProvider } from "@vibeflui/core";
import { registry } from "@/lib/vibeflui/registry";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <FluiKitProvider registry={registry}>
      {children}
    </FluiKitProvider>
  );
}

Direct slot props

Direct slot props are convenient for small examples. Keep the renderer component and the schema in their own files even here — only the registry step is skipped.

components/vibeflui/renderers/status/StatusCell.tsx

TSX

export function StatusCell({ value }: { value?: unknown }) {
  return <span>{String(value ?? "-")}</span>;
}

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: [
      { key: "name", label: "Name" },
      { key: "status", label: "Status", type: "custom", renderer: "StatusCell" }
    ]
  },
  registry: {
    renderers: ["StatusCell"]
  }
} as const;

app/users/page.tsx

TSX

"use client";

import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { StatusCell } from "@/components/vibeflui/renderers/status/StatusCell";
import { usersSchema } from "@/schemas/users/users.schema";

const users = [{ id: "usr_1", name: "Ada Lovelace", status: "active" }];

export default function UsersPage() {
  return (
    <FluiKitProvider renderers={{ StatusCell }}>
      <FluiKit schema={usersSchema} data={users} />
    </FluiKitProvider>
  );
}

For production examples, prefer createRegistry so registry setup can be shared across pages.