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.
registry: {
renderers: ["StatusBadge"],
validators: ["users.email"],
transformers: ["trim"],
optionLoaders: ["users.roles"],
actionHandlers: ["users.invite"],
permissionResolvers: ["users.write"]
}Runtime registry
Type: FluiKitRuntimeRegistry.
| Slot | Type |
|---|---|
components | Record<string, ComponentType<FluiKitRuntimeComponentProps>> |
renderers | Record<string, ComponentType<FluiKitRuntimeComponentProps>> |
fieldAdapters | Record<string, ComponentType<FluiKitRuntimeComponentProps>> |
validators | Record<string, FluiKitValidator> |
transformers | Record<string, FluiKitTransformer> |
actionHandlers | Record<string, FluiKitActionHandler> |
handlers | Record<string, FluiKitActionHandler> |
permissionResolvers | Record<string, FluiKitPermissionResolver> |
optionLoaders | Record<string, FluiKitOptionLoader> |
hooks | Record<string, FluiKitActionHandler> |
events | Record<string, FluiKitEventHandler> |
classNameResolvers | Record<string, FluiKitComputedResolver> |
messageResolvers | Record<string, FluiKitMessageResolver> |
computedResolvers | Record<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.
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."
}
});