VVibeFlui

Registry Config

The schema registry key lists runtime keys the schema expects. The runtime registry supplies the actual functions or components.

schema.registry is optional and registers nothing at runtime by itself — it is read only by the schema inspector (inspectSchema) to warn when a validator/renderer/handler/etc. string used elsewhere in the schema has no matching entry declared here. The actual functions and components must be registered separately via createRegistry() and passed to FluiKitProvider.

Declarative schema registry

Type: FluiKitRegistryConfig.

TS
registry: {
  renderers: ["StatusBadge"],
  validators: ["users.email"],
  transformers: ["trim"],
  optionLoaders: ["users.roles"],
  actionHandlers: ["users.invite"],
  permissionResolvers: ["users.write"]
}

Runtime registry

Type: FluiKitRuntimeRegistry.

SlotType
componentsRecord<string, ComponentType<FluiKitRuntimeComponentProps>>
renderersRecord<string, ComponentType<FluiKitRuntimeComponentProps>>
fieldAdaptersRecord<string, ComponentType<FluiKitRuntimeComponentProps>>
validatorsRecord<string, FluiKitValidator>
transformersRecord<string, FluiKitTransformer>
actionHandlersRecord<string, FluiKitActionHandler>
handlersRecord<string, FluiKitActionHandler>
permissionResolversRecord<string, FluiKitPermissionResolver>
optionLoadersRecord<string, FluiKitOptionLoader>
hooksRecord<string, FluiKitActionHandler>
eventsRecord<string, FluiKitEventHandler>
classNameResolversRecord<string, FluiKitComputedResolver>
messageResolversRecord<string, FluiKitMessageResolver>
computedResolversRecord<string, FluiKitComputedResolver>

Registries merge in order: parent FluiKitProvider context → applied plugins → the registry prop → direct registry-slot props passed to FluiKitProvider (e.g. renderers={{...}}) — later entries override same-key entries from earlier sources.

Example

Define the runtime registry in its own file (e.g. registry.ts) and import it into the page — do not declare it inline next to <FluiKit>/<FluiKitProvider> usage.

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

export const registry = createRegistry({
  renderers: {
    StatusBadge
  },
  validators: {
    "users.email": async (value) =>
      String(value ?? "").includes("@") ? undefined : "Enter a valid email address."
  }
});