Component Props

This page covers the public component props most apps use directly.

`FluiKitProps`

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

Prop	Type	Required	Description
`schema`	`FluiKitConfig`	Yes	Public schema to render.
`data`	`Record<string, unknown>[]`	No	Static rows.
`response`	`unknown`	No	Provider/endpoint-shaped response.
`loading`	`boolean`	No	External loading state.
`error`	`unknown`	No	External error state.
`className`	`string`	No	Root class name.
`onCreate`	`(values, context) => unknown \| Promise<unknown>`	No	External create handler.
`onUpdate`	`(values, context) => unknown \| Promise<unknown>`	No	External update handler.
`onDelete`	`(row) => unknown \| Promise<unknown>`	No	External delete handler.
`onView`	`(row) => void \| Promise<void>`	No	External view handler.
`onRowAction`	`(action, row) => unknown \| Promise<unknown>`	No	External row action handler.
`onBulkAction`	`(action, rows) => unknown \| Promise<unknown>`	No	External bulk action handler.
`onTableQueryChange`	`(query) => void`	No	Table query state callback.

Submit context

type FluiKitSubmitContext = {
  schema: NormalizedFluiKitConfig;
  mode: FluiKitFormMode;
  row?: Record<string, unknown>;
};

Example

TSX

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

const handleCreateUser = async (values: Record<string, unknown>) => {
  return createUser(values);
};

<FluiKit
  schema={usersSchema}
  data={users}
  onCreate={handleCreateUser}
/>;

`FluiKitProviderProps`

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

FluiKitProviderProps accepts provider-specific props and the runtime registry slots.

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	Rendered children.
`plugins`	`FluiKitPlugin[]`	No	Plugins to apply.
`registry`	`FluiKitRuntimeRegistry`	No	Runtime registry object.
`providers`	`Record<string, FluiKitDataProvider>`	No	Named data providers.
`messages`	`Record<string, string>`	No	Message overrides.
`permissionContext`	`FluiKitPermissionContext`	No	Roles, permissions, user, or custom context.

Because provider props also extend registry slots, these may be passed directly:

TSX

<FluiKitProvider
  renderers={{ StatusBadge }}
  actionHandlers={{ "users.invite": inviteUser }}
>
  <FluiKit schema={usersSchema} data={users} />
</FluiKitProvider>

For reusable apps, prefer a named registry object from createRegistry.