Basic Usage

Generated UI previewTABLE

Users

A basic VibeFlui resource.

#		Email	Role
1	Ada Lovelace	ada@example.test	Admin
2	Grace Hopper	grace@example.test	Editor

Page 1 of 1

This is the searchable, paginated table the schema below produces — no registry or custom components needed for this one.

This tutorial creates the smallest useful VibeFlui page: one schema, one registry, and one page component.

Use this when you want a quick schema-driven table preview in a React or Next.js app.

File structure

TXT

app/
  users/
    page.tsx
schemas/
  users/
    user.resource.schema.ts
lib/
  vibeflui/
    registry.tsx

Schema file

schemas/users/user.resource.schema.ts

export const userResourceSchema = {
  resource: "users",
  title: "Users",
  description: "A basic VibeFlui resource.",
  identity: {
    key: "id",
    param: "id"
  },
  table: {
    columns: [
      { key: "name", label: "Name", searchable: true, sortable: true },
      { key: "email", label: "Email", type: "email", searchable: true },
      { key: "role", label: "Role" }
    ],
    search: {
      enabled: true,
      placeholder: "Search users..."
    },
    pagination: {
      enabled: true,
      pageSize: 10
    }
  },
  actions: false
} as const;

The schema is JSON-friendly: it contains data, not functions. Keeping it outside TSX makes the page component easier to read and lets rendered examples reuse the same object.

Registry file

lib/vibeflui/registry.tsx

TSX

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

export const vibefluiRegistry = createRegistry();

This first example does not need custom renderers or handlers, but keeping a registry file from day one gives you a stable place to add runtime behavior later.

Page file

app/users/page.tsx

TSX

"use client";

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

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

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

What renders

The page renders a searchable, paginated table with three columns. Because actions is false, no create, edit, delete, row, or bulk actions are shown.