Widgets
Composite, batteries-included widgets: kanban, pivot, dashboards, and more.
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> 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> 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.
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.
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> 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.
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.
Renders a value and turns into an editable input on click. Saves the change via dataProvider.update().
Background job queue dashboard. Polls a jobs resource (or whichever you pass), groups rows by status, and exposes retry / cancel actions per row.
<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.
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> 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> 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> 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> 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>.
Generate a List, Edit, or Show view automatically from a flat JSON Schema.
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.