VVibeFlui

Simplest Example

This is the smallest useful FluiKit example.

Schema

schemas/users/users.schema.ts

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

Page

app/users/page.tsx

TSX
"use client";

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

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 <FluiKit schema={usersSchema} data={users} />;
}

What renders

VibeFlui renders a table with three data columns, the default row number column, and two rows. Actions are disabled because the schema sets actions: false.

Add actions later

When you are ready for create, edit, delete, row actions, feedback, or backend execution, continue with: