FluiKitDetail

FluiKitDetail renders read-only detail fields from a normalized schema.

It is opened by FluiKit when schema.detail.enabled and schema.actions.view.enabled are both true.

Props

type FluiKitDetailProps = {
  schema: NormalizedFluiKitConfig;
  row?: Record<string, unknown>;
  className?: string;
};

Default behavior

If schema.detail.enabled is false, the component renders nothing.

Each detail field reads from:

field.valueFrom, when configured
field.key

If field.renderer is configured and found in registry.renderers, the renderer receives schema, detailField, row, and value.

Without a custom renderer, values are formatted as:

Value	Output
`undefined`, `null`, or empty string	`-`
boolean	`Yes` or `No`
object	JSON block
other values	string

Example

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  detail: {
    enabled: true,
    fields: [
      { key: "name", label: "Name" },
      { key: "email", label: "Email" },
      { key: "profile.role", label: "Role", valueFrom: "profile.role" }
    ]
  }
} as const;

app/users/user-detail.tsx

TSX

"use client";

import { FluiKitDetail, normalizeSchema } from "@vibeflui/core";
import { usersSchema } from "@/schemas/users/users.schema";

const schema = normalizeSchema(usersSchema);

export function UserDetail({ row }: { row: Record<string, unknown> }) {
  return <FluiKitDetail schema={schema} row={row} />;
}