Shadcn Plugin

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

Install

BASH

npm install @vibeflui/core @vibeflui/shadcn

Public exports

Export	Purpose
`createShadcnPlugin`	Creates a plugin instance with optional overrides.
`shadcnPlugin`	Prebuilt plugin instance.
`ShadcnStatusBadge`	Renderer registered by default as `StatusBadge`.
`ShadcnSwitch`	Field adapter registered by default as `Switch`.

Registered slots

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

Minimal setup

TSX

import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { createShadcnPlugin } from "@vibeflui/shadcn";

const shadcnPlugin = createShadcnPlugin();

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

Schema usage

export const usersSchema = {
  resource: "users",
  adapter: "shadcn",
  theme: {
    preset: "shadcn"
  },
  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

createShadcnPlugin() accepts optional renderers, components, fieldAdapters, and messages.

import { createShadcnPlugin } from "@vibeflui/shadcn";

export const shadcnPlugin = createShadcnPlugin({
  renderers: {
    UserStatusBadge
  },
  messages: {
    loadError: "Unable to load users."
  }
});

Common mistakes

Use the plugin exports shown above.
Shadcn behavior comes from @vibeflui/shadcn; install and register the plugin before using its preset, renderer, or field adapter.