Direct Component Usage

Direct component usage means rendering exported child components without going through FluiKit.

This is useful for local demos, design review pages, and advanced host apps that want to compose their own flow.

Normalize first

Leaf components generally expect NormalizedFluiKitConfig, not the public FluiKitConfig.

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: ["name", "email", "status"]
  },
  actions: false
} as const;

app/users/users-table-only.tsx

TSX

"use client";

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

const schema = normalizeSchema(usersSchema);

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

export function UsersTableOnly() {
  return <FluiKitTable schema={schema} data={users} />;
}

Keep a provider nearby

Direct usage still reads useFluiKitContext for registry, providers, messages, permissions, and plugin output.

lib/vibeflui/registry.ts

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

export const registry = createRegistry({
  // renderers, fieldAdapters, validators, actionHandlers, and other slots
});

app/users/page.tsx

TSX

"use client";

import { FluiKitProvider, FluiKitTable, type NormalizedFluiKitConfig } from "@vibeflui/core";
import { registry } from "@/lib/vibeflui/registry";

export default function UsersPage({ schema, rows }: { schema: NormalizedFluiKitConfig; rows: Record<string, unknown>[] }) {
  return (
    <FluiKitProvider registry={registry}>
      <FluiKitTable schema={schema} data={rows} />
    </FluiKitProvider>
  );
}

Without a provider, VibeFlui uses the default empty context. Native fields and basic tables still render, but custom renderers, adapters, handlers, option loaders, permission resolvers, custom messages, and class name resolvers will be absent.

Choose the right component

Need	Use
Full resource UI	`FluiKit`
Only a form	`FluiKitForm`
Only a table	`FluiKitTable`
One field	`FluiKitField`
One action button	`FluiKitAction`
Read-only detail panel	`FluiKitDetail`
Operation feedback	`FluiKitFeedback`
App chrome primitive	`FluiKitModal`, `FluiKitDrawer`, `FluiKitCard`, `FluiKitTab`