Theme slots

A theme slot replaces one shared component everywhere FlowPanel renders it. Use slots to align the admin with an application design system—not to change data fetching, routing, or page behavior.

Replace one component

import { forwardRef } from "react";
import type { ButtonProps } from "@flowpanel/kit/react";

export const ProductButton = forwardRef<HTMLButtonElement, ButtonProps>(
  function ProductButton({ className, ...props }, ref) {
    return <button ref={ref} className={`product-button ${className ?? ""}`} {...props} />;
  },
);

export default defineAdmin({
  adapter,
  auth,
  theme: {
    components: { Button: ProductButton },
  },
  resources,
});

theme.components is typed against FlowpanelComponentSlots. Preserve the complete prop contract, forward refs where the default does, pass through accessibility attributes, and keep loading/disabled behavior observable.

Available slots

The shipped slot registry is generated from the React package:

Import each prop type from @flowpanel/kit/react rather than copying its fields. TypeScript will then surface contract changes during an upgrade. The generated React components reference is the canonical prop reference.

Test the replacement in context

A slot can appear in lists, forms, drawers, dashboards, dialogs, and loading states. Verify keyboard focus, disabled and destructive states, long labels, mobile width, dark mode, and screen-reader names. For Button, support ref forwarding and composition used by Radix-based controls.

Add application-owned slots carefully

FlowpanelComponentSlots is augmentable, so custom widgets can share application-owned primitives through the same provider. This does not make a new key part of FlowPanel's shipped UI; only components that explicitly read that key will use it.

Use Styling for token-level changes. Use Eject when the required change is behavioral rather than a component substitution.