VVibeFlui

Components

Components are the React runtime layer that renders a normalized VibeFlui schema into UI.

Most application pages should use FluiKit. The smaller exports are available when an app needs to render only one part of the schema.

The public component exports are:

ComponentPurpose
FluiKitFull schema runtime: title, dashboard, table, actions, forms, detail view, feedback, provider loading, and multi-resource rendering.
FluiKitProviderRuntime context for registry entries, providers, messages, plugins, permissions, plugin themes, adapters, and inspector panels.
FluiKitFormForm renderer for a normalized schema.
FluiKitTableTanStack Table renderer for a normalized schema.
FluiKitFieldSingle field renderer.
FluiKitActionSingle action button or icon action renderer.
FluiKitDetailRead-only detail definition list.
FluiKitFeedbackInline or modal operation feedback.
FluiKitModalPortal-based modal surface.
FluiKitDrawerPortal-based drawer surface.
FluiKitConfirmDialogConfirmation dialog built on FluiKitModal.
FluiKitCardSmall display card used by dashboards and available directly.
FluiKitTabControlled or uncontrolled tab primitive.
FluiKitDashboardDashboard/card renderer for normalized schemas.

Use FluiKit for product screens because it normalizes the schema and wires together operations, events, providers, feedback, table query state, forms, detail, and action execution.

Keep the schema, the custom renderer, the registry, and the page in separate files.

schemas/users/users.schema.ts

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

components/vibeflui/renderers/status/StatusBadge.tsx

TSX
export function StatusBadge({ value }: { value?: unknown }) {
  return <span className="rounded-full px-2 py-1 text-xs">{String(value ?? "-")}</span>;
}

lib/vibeflui/registry.tsx

TSX
import { createRegistry } from "@vibeflui/core";
import { StatusBadge } from "@/components/vibeflui/renderers/status/StatusBadge";

export const registry = createRegistry({
  renderers: {
    StatusBadge
  }
});

app/users/page.tsx

TSX
"use client";

import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { usersSchema } from "@/schemas/users/users.schema";
import { registry } from "@/lib/vibeflui/registry";

const users = [
  { id: "usr_1", name: "Ada Lovelace", email: "ada@example.test", status: "active" },
  { id: "usr_2", name: "Grace Hopper", email: "grace@example.test", status: "pending" }
];

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

Use leaf components directly only when you already have a NormalizedFluiKitConfig, usually from normalizeSchema(schema). This does not need a registry because it renders no custom renderers or adapters.

app/users/preview.tsx

TSX
"use client";

import { FluiKitForm, normalizeSchema } from "@vibeflui/core";
import { usersSchema } from "@/schemas/users/users.schema";

const normalizedSchema = normalizeSchema(usersSchema);

export function StandaloneFormPreview() {
  return <FluiKitForm schema={normalizedSchema} mode="create" />;
}

Subpages