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

```tsx excerpt
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} />;
  },
);
```

```ts excerpt
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:

| Slot | Component contract |
| --- | --- |
| `Avatar` | `import("react").ComponentType<AvatarProps>` |
| `Badge` | `import("react").ComponentType<BadgeProps>` |
| `Button` | `import("react").ComponentType<ButtonProps>` |
| `ConfirmDialog` | `import("react").ComponentType<ConfirmDialogProps>` |
| `EmptyState` | `import("react").ComponentType<EmptyStateProps>` |
| `MetricCard` | `import("react").ComponentType<MetricCardProps>` |
| `PageHeader` | `import("react").ComponentType<PageHeaderProps>` |
| `Pagination` | `import("react").ComponentType<PaginationProps>` |
| `SkeletonTable` | `import("react").ComponentType<SkeletonTableProps>` |
| `StatusBadge` | `import("react").ComponentType<StatusBadgeProps>` |

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](/docs/reference/react-components) 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](/docs/customization/styling) for token-level changes. Use [Eject](/docs/customization/eject) when the required change is behavioral rather than a component substitution.