TailAdmin Plugin

@vibeflui/tailadmin registers TailAdmin-compatible theme and adapter metadata, a StatusBadge renderer, and a Switch field adapter.

Install

BASH

npm install @vibeflui/core @vibeflui/tailadmin

The package exports ./tailadmin.css. Import it once when the TailAdmin stylesheet is needed.

import "@vibeflui/tailadmin/tailadmin.css";

Public exports

Export	Purpose
`createTailAdminPlugin`	Creates a plugin instance with optional overrides.
`tailAdminPlugin`	Prebuilt plugin instance.
`TailAdminStatusBadge`	Renderer registered by default as `StatusBadge`.
`TailAdminSwitch`	Field adapter registered by default as `Switch`.

Registered slots

Slot	Keys
`themes`	`tailadmin`
`adapters`	`tailadmin`
`renderers`	`StatusBadge`
`fieldAdapters`	`Switch`
`messages`	`loadError`, `submitError`

Minimal setup

TSX

import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { createTailAdminPlugin } from "@vibeflui/tailadmin";

const tailAdminPlugin = createTailAdminPlugin();

export function UsersPage() {
  return (
    <FluiKitProvider plugins={[tailAdminPlugin]}>
      <FluiKit schema={usersSchema} data={usersData} />
    </FluiKitProvider>
  );
}

Schema usage

export const usersSchema = {
  resource: "users",
  adapter: "tailadmin",
  theme: {
    preset: "tailadmin"
  },
  table: {
    columns: [
      { key: "name", label: "Name" },
      { key: "status", label: "Status", type: "custom", renderer: "StatusBadge" }
    ]
  },
  form: {
    fields: [
      { name: "enabled", label: "Enabled", type: "switch", adapter: "Switch" }
    ]
  },
  registry: {
    renderers: ["StatusBadge"],
    fieldAdapters: ["Switch"]
  }
} as const;

Customizing the plugin

createTailAdminPlugin() accepts optional renderers, fieldAdapters, and messages.

import { createTailAdminPlugin } from "@vibeflui/tailadmin";
import { CustomerStatusBadge } from "@/components/vibeflui/renderers/customers/CustomerStatusBadge";

export const tailAdminPlugin = createTailAdminPlugin({
  renderers: {
    CustomerStatusBadge
  }
});

Common mistakes

Use the plugin exports shown above.
Do not forget the optional stylesheet when previewing TailAdmin visuals.