Basic Setup

app/
  users/
    page.tsx
components/
  vibeflui/
    renderers/
      status/
        StatusBadge.tsx
schemas/
  users/
    users.schema.ts
lib/
  vibeflui/
    registry.tsx

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  title: "Users",
  identity: {
    key: "id",
    param: "id"
  },
  table: {
    columns: [
      { key: "name", label: "Name", searchable: true, sortable: true },
      { key: "email", label: "Email", type: "email", searchable: true },
      { key: "status", label: "Status", renderer: "StatusBadge" }
    ],
    search: {
      enabled: true,
      placeholder: "Search users..."
    }
  },
  actions: false,
  registry: {
    renderers: ["StatusBadge"]
  }
} as const;

import type { FluiKitRuntimeComponentProps } from "@vibeflui/core";

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

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

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

"use client";

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

// Static data keeps the first setup focused on rendering.
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={vibefluiRegistry}>
      <FluiKit schema={usersSchema} data={users} />
    </FluiKitProvider>
  );
}