Class Name Resolvers

theme.classNameResolver points to a registry function that can return dynamic class names.

Schema declaration

export const usersSchema = {
  resource: "users",
  theme: {
    classNameResolver: "theme.resolveClassName"
  },
  registry: {
    classNameResolvers: ["theme.resolveClassName"]
  }
} as const;

Runtime registry

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  classNameResolvers: {
    "theme.resolveClassName": ({ row, column, className }) => {
      if (className === "tableCell" && column?.key === "status" && row?.status === "suspended") {
        return "font-medium text-red-700";
      }

      return "";
    }
  }
});

Context

The resolver receives runtime component props including:

• schema
• row
• values
• field
• column
• action
• className

For theme resolvers, className contains the slot name.

Resolver order

The resolver result is appended after preset classes, schema slot classes, and matching classNameWhen classes.

Common mistakes

• Keep resolver functions in createRegistry(), then reference them from schema by string key.
• Each slot receives only the context available to that renderer.