Widgets

Composite, batteries-included widgets: kanban, pivot, dashboards, and more.

ApprovalQueue

Pending-approval inbox view. Renders one card per record in the surrounding <ListContext> (typically scoped to status=pending via <List filter>). Each card has approve + reject buttons. On click, writes { status, approverId, approverNote, decidedAt } atomically.

Assistant

<Assistant> is a chat-style AI sidebar with pluggable LLM transport and tool-call support. The component handles the conversation UI, message streaming, and tool execution; you bring the AI provider via the transport prop (OpenAI, Anthropic, Vercel AI SDK, custom backend — your choice).

CommandMenu

<CommandMenu> is a cmd+K command palette that lets users navigate between resources, jump to records via cross-resource search, run registered actions (refresh, theme, logout), and access recently visited items from an empty-state list. On mobile viewports the palette renders inside a full-height <Sheet> instead of a centered dialog.

DashboardCharts

The DashboardCharts family provides four ready-made chart and metric components for admin dashboards. All components are pure — they accept data and field-name props and render via Recharts inside a shadcn <Card> shell. Each component supports a loading skeleton state.

DataProviderDevtools

Floating panel that wraps the surrounding <DataProviderContext> and logs every data-provider call. Drop in the tree wherever you want call-tracking to start; consumers below it automatically use the tracked instance.

DiffViewer

<DiffViewer> compares two versions of a record and highlights added, removed, changed, and unchanged fields. Use it inside a <RecordTimeline> entry to show what changed in an audit-log update, or standalone to compare arbitrary objects.

I18nKeyEditor

Wraps an i18n provider so every missing-key lookup is captured and surfaced in a floating panel. Inline-edit translations; Export emits a JSON patch to the clipboard.

InPlaceEditor

Renders a value and turns into an editable input on click. Saves the change via dataProvider.update().

JobMonitor

Background job queue dashboard. Polls a jobs resource (or whichever you pass), groups rows by status, and exposes retry / cancel actions per row.

KanbanBoard

<KanbanBoard> renders records from the parent <List> as a drag-and-drop Kanban board. Records are grouped into columns by an enum field (status, stage, priority, etc.). Dragging a card to another column calls useUpdate optimistically, so the UI updates immediately and rolls back on server error.

LayoutBuilder

Drag-drop reorder UI for a resource's list columns. Persists the order to useStore under a deterministic key so consumers can read it back into <DataTable storeKey>.

OnboardingTour

<OnboardingTour> displays a sequence of coachmark tooltips that highlight specific DOM elements, guiding first-time users through a feature. Completion state is persisted in ra-core's store (localStorage by default), so the tour only runs once per user.

PermissionMatrix

<PermissionMatrix> renders an editable role × resource × action grid. Each cell is a checkbox: "can <role> do <action> on <resource>?". It reads and writes via a controlled value/onChange API and is compatible with any auth model — you supply the role list, resource list, action list, and current state.

PivotGrid

<PivotGrid> is a cross-tab aggregate view. Pick a row field and a column field; the grid shows aggregated values (count, sum, avg, min, max) at each intersection, plus row and column totals. It reads from useListContext so it composes inside <List>. Aggregation is pure client-side — for very large datasets, server-aggregate first and pass records via the data prop.

RecordTimeline

<RecordTimeline> renders a vertical activity feed for a record — creates, edits, comments, state transitions. Two data sources: an explicit entries prop, or reference + target props that read from an audit-log resource via ra-core's <ReferenceManyFieldBase>.

SchemaDrivenView

Generate a List, Edit, or Show view automatically from a flat JSON Schema.

ThemeStudio

Live editor for the active palette's CSS custom properties. Seeds its values from the currently-rendered theme via getComputedStyle and writes edits straight to document.documentElement, so changes are visible instantly.