Registry Components

Components are custom React components available to schema-driven UI.

Use components for custom filters, custom field components, or reusable UI blocks that are not simply value renderers.

Schema usage

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    filters: [
      {
        key: "status",
        label: "Status",
        type: "custom",
        component: "users.statusFilter"
      }
    ],
    columns: ["name", "email", "status"]
  },
  form: {
    fields: [
      {
        name: "notes",
        label: "Notes",
        type: "textarea",
        component: "users.notesField"
      }
    ]
  },
  registry: {
    components: ["users.statusFilter", "users.notesField"]
  }
} as const;

Runtime registry

components/vibeflui/fields/UserNotesField.tsx

TSX

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

export function UserNotesField({ value, onChange }: FluiKitRuntimeComponentProps) {
  return (
    <textarea
      value={String(value ?? "")}
      onChange={(event) => onChange?.(event.target.value)}
    />
  );
}

components/vibeflui/filters/UserStatusFilter.tsx

TSX

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

export function UserStatusFilter({ value, onChange }: FluiKitRuntimeComponentProps) {
  return (
    <select value={String(value ?? "")} onChange={(event) => onChange?.(event.target.value)}>
      <option value="">All statuses</option>
      <option value="active">Active</option>
      <option value="suspended">Suspended</option>
    </select>
  );
}

lib/vibeflui/registry.tsx

TSX

import { createRegistry } from "@vibeflui/core";
import { UserNotesField } from "@/components/vibeflui/fields/UserNotesField";
import { UserStatusFilter } from "@/components/vibeflui/filters/UserStatusFilter";

export const registry = createRegistry({
  components: {
    "users.notesField": UserNotesField,
    "users.statusFilter": UserStatusFilter
  }
});

Component props

Components receive runtime component props:

schema
field
detailField
column
action
row
value
values
options
mode
onChange
children
className

For TypeScript, use FluiKitRuntimeComponentProps from @vibeflui/core.

Component vs field adapter

Use components for general custom UI.

Use fieldAdapters when the component is specifically a form field implementation.