React components

@flowpanel/react is the component library the admin renders with. Most of it is consumed indirectly — resources, widgets and forms compile down to these components — but every export is public and safe to use directly when you build a custom slot, page, or "bare"-shell chrome around FlowPanel.

import { AutoForm, DataTable, useAdminTable } from "@flowpanel/kit/react";

@flowpanel/kit/react is the specifier to reach for: @flowpanel/kit is what flowpanel init installs, and it re-exports this whole surface. The standalone @flowpanel/react package publishes the same exports and works identically — use it only when you depend on it directly rather than through the kit.

Two neighbouring subpaths are worth knowing about, because their exports are not in the table below:

• @flowpanel/kit/next/client — the client components the Next.js runtime mounts around this library: DrawerHost, CommandHost, DashboardActionsBar, DataTableWithDrawerRows, CreateDrawer, DetailTabsClient, SavedViewsDropdown, ResourceListSearch, ResourceListFilters, ResourceListDeletedToggle, DashboardDateRange, WidgetErrorBoundary. Reach for it when you assemble a "bare"-shell layout by hand.
• @flowpanel/kit/client — the standalone useAdminMutation hook, which pulls in no component library at all. See Client hooks.

Shell

Chrome, navigation and the pieces a custom layout composes around admin content.

Data table & filters

DataTable and the controls that surround it — column menus, filter inputs, cell renderers.

Forms

AutoForm compiles a resource's declared fields into inputs; Form and Field are the lower-level primitives it's built from, for hand-written forms.

The component is declared internally as Field with a FieldProps interface, but the package renames both on export: the value is exported as FormField and the type as FormFieldProps. Field and FieldProps are not importable names — the prefix keeps them from colliding with the many other Field components a consuming app is likely to have. The interface is unchanged by the rename; the property table above is generated from it.

FormField's type prop accepts:

"text" | "email" | "password" | "url" | "number" | "date" | "datetime" |
"datetime-local" | "time" | "color" | "search" | "textarea" | "markdown" |
"json" | "tags" | "select" | "multiselect" | "radio" | "reference" |
"boolean" | "switch" | "checkbox" | "hidden"

That union is internal — it has a name in the source (FieldControlType) but is not exported, so type it inline or read it off ComponentProps<typeof FormField>["type"]. It is a superset of the config-level FieldType: datetime-local and search exist only here, which is why a ResolvedField (typed FieldType) always assigns cleanly into it and not the other way round.

Feedback

Empty, error, loading and toast states.

Widgets

Dashboard widget renderers — the components a widget() builder's config resolves into.

Layout primitives

Shared by widgets and by hand-built pages.

Atoms

Small, single-purpose display components.

Hooks

Client hooks for building custom admin UI. All are "use client".

useLiveChannel(channel, onMessage, options?) — subscribes to one SSE channel served by stream(). Connection pooling: hook instances that share the same endpoint + channel reuse one EventSource, refcounted, rather than opening one per instance. The returned LiveStatus runs idle → connecting → live, drops to reconnecting while a retry is pending, and reaches offline after six consecutive failed attempts (~30s); it returns to idle when the subscription is torn down. Retries continue while offline.

const status = useLiveChannel("resource.orders", (payload) => {
  console.log("order event", payload);
});

useAdminTable() — reads and writes the list URL state (?page=, ?perPage=, ?q=, ?sort=field:dir, ?f_<field>=value) that DataTable and FilterBar render from. pageSize is number | null: null means no ?perPage= is present and the resource's configured pageSize applies.

const { page, pageSize, sort, setPage, setSort } = useAdminTable();

Every setter navigates with router.replace, not push: filters change on each keystroke, and pushing would turn Back into a walk through the filter history instead of a way out of the list.

useUrlState() — general-purpose typed reader/writer for the current route's search params. useAdminDrawer is built on it; useAdminTable is not — it reads next/navigation directly.

useTheme(options?) — reads the resolved light/dark/auto theme and returns a stable toggle/setTheme that persists to localStorage.

const { theme, toggle } = useTheme();

useToast() — fires a toast from anywhere under ToastProvider / FlowpanelGlobals.

const toast = useToast();
toast.success("Saved");

useOptimisticAction(serverValue, applyPatch) — thin wrapper over React.useOptimistic + useTransition for an optimistic value with a pending flag. It is offered for your own components; nothing shipped uses it — InlineEditCell keeps its draft in plain useState.

useAdminCommand() — controls the ⌘K command palette's open state and binds the ⌘K/Ctrl+K shortcut.

useAdminDrawer() — reads/writes ?drawer=<resource>:<id> and ?tab=, the URL state a drawer's open/closed state and active tab live in.

useDashboardParam(key, schema, fallback) — type-safe reader/writer for one dashboard URL search param, validated against a Zod schema.

useMediaQuery(query) — subscribes to a CSS media query via useSyncExternalStore, with a server snapshot of false so SSR and first paint agree. DataTable uses useMediaQuery("(max-width: 639px)") for its card/table breakpoint; use the same query to match it in custom UI.

const isMobile = useMediaQuery("(max-width: 639px)");

Realtime

Realtime status flows through a shared bus so many components can subscribe without opening one EventSource each.

RealtimeProvider — mounts one shared EventSource for every descendant useRealtimeRefresh call. It routes incoming envelopes ({ channel, payload }) to the subscribers of that channel, coalesces the resulting router.refresh(), and reconnects with backoff on error. Mount it once near the root of a "bare"-shell layout; Flowpanel/AdminShell mount it for you otherwise.

useRealtimeRefresh(channels, options?) — subscribes a component to one or more channels and triggers a debounced router.refresh() on any event. Under a RealtimeProvider ancestor it joins the shared bus; standalone (no provider), debounceMs and endpoint apply directly and it opens one pooled EventSource carrying its whole channel set, shared with every other standalone subscriber of the same set.

useRealtimeRefresh("resource.orders");

RealtimeRefresh — the same thing as a component, for a server tree that has no client component to hang the hook on: <RealtimeRefresh channels={…} debounceMs={…} /> renders nothing and subscribes its channels. This is what the dashboard widget renderer emits for a widget's realtime option.

<RealtimeRefresh channels={["resource.orders", "scraper:tick"]} />

DevToolsPanel — floating "fp" panel showing realtime status, the active-channel list and event count. Development-only: it renders null when NODE_ENV === "production". Mount it once, in development builds:

{process.env.NODE_ENV !== "production" && <DevToolsPanel />}

Lower-level bus access: useRealtimeBus (the raw RealtimeBus, or null outside a provider), useRealtimeStatus, useRealtimeStats ({ channels, eventCount }).

Theme utilities

Non-React helpers behind useTheme and ThemeScript, for code that needs the theme outside a component.