UI & Layout

Full-page error screen displayed when the current user does not have permission to access a resource. Renders a centered lock icon, a primary heading, and a secondary message.

Header bar rendered at the top of the admin layout. Hosts the sidebar trigger, the title/breadcrumb slot, the locales menu, the theme toggle, the refresh button, and the user menu.

Navigation sidebar displaying menu items, allowing users to navigate between different sections of the application. They can collapse it to an icon-only sidebar by clicking on the sidebar icon in the breadcrumb. On mobile, it renders as a collapsible drawer. <AppSidebar> leverages shadcn/ui's Sidebar component.

A floating banner that informs the user a new version of the application is available, with a button to reload the page.

Redirection target used by external authentication services (e.g. OAuth) after a user has signed in. Displays a loading indicator while the authProvider.handleCallback() promise is in flight, then redirects to the admin app on success — or shows an <AuthError> on failure.

Error screen displayed when authentication fails — typically used as the fallback shown by <AuthCallback> when an OAuth flow returns an error, or as a manual "you are not signed in" page. Renders a heading, the error message and a button linking back to /login.

Full-page error screen displayed when authentication fails — typically because the user's session has expired or their credentials are no longer valid. Mirrors <AccessDenied> but uses a warning triangle icon and different default texts.

Page shell for custom authentication flows — login, signup, password reset, magic-link, etc. Provides a two-column layout with a dark gradient testimonial sidebar on the left and a flexible form area on the right. Mounts the <Notification> toaster at the root so error and info messages triggered by useNotify() are displayed.

Responsive breadcrumb that helps users navigate the app. On mobile, it collapses into a button listing intermediate links. It leverages shadcn/ui's Breadcrumb component.

Card content variant with reduced padding for stacked use inside a single Card. When several blocks of card content sit next to one another, the default vertical padding of <CardContent> doubles between blocks and wastes space — CardContentInner zeroes out vertical padding for inner items and keeps it for the first and last children.

<CheckForApplicationUpdate> polls a URL at a regular interval, hashes the response body, and renders a notification when the hash changes — useful for detecting that a new version of the application has been deployed while the user has the page open.

<Confirm> is a generic confirmation dialog component, used by Shadmin internally for destructive actions. You can use it in your own custom actions as well.

Sidebar entry linking to the dashboard (/). Uses the default house icon and the translated label ra.page.dashboard.

Test utility that simulates a fixed device width by overriding window.matchMedia and constraining its children to that pixel width. Useful for Storybook and SSR-style tests to verify responsive layouts without resizing the actual viewport.

Default empty state rendered by <List> when the data provider returns zero records and there are no active filters.

App-wide error component. It displays the error message and a back button. In development, it also shows the component stack trace.

Wrapper that hides its children when the user scrolls down past a threshold and reveals them again when scrolling back up. Useful for collapsible top bars and floating headers that need to free up vertical space when reading.

<Inspector>, <InspectorButton>, and <Configurable> form a live-edit system that lets end users customize parts of the UI at runtime. Users toggle "edit mode" via the <InspectorButton> (typically placed in the app header). Once edit mode is on, every <Configurable> element shows a hover affordance and a cogwheel that opens its own editor inside the floating <Inspector> panel. Changes persist in the Store, so user choices survive reloads.

Displays a keyboard shortcut using styled <kbd> elements. Useful for menus, tooltips, or any UI element that needs to advertise a hotkey to users.

<Labeled> wraps a field with a translated label.

Application shell including sidebar, header (breadcrumb portal, locale & theme toggles, refresh, user menu) and notification area.

Linear progress bar with a delay before it appears, designed to replace an input or a field in a form layout while data is loading. The component reserves vertical space before the bar appears, so swapping it for the resolved value does not cause layout jumps.

Styled wrapper around react-router's <Link> for use inside admin views.

Default action toolbar rendered on top of <List> views.

Link button that opens the list view of the current resource.

Default placeholder rendered by <List> when filters yield zero results.

Toolbar that pairs an inline <FilterForm> with a <ListActions> slot.

Loading indicator used for slow element or page loads. It displays a spinner and a loading message.

Small inline spinner that appears whenever the data provider has a query or a mutation in flight.

Full-page loading indicator. Alias for <Loading>. Used by ra-core as the loadingPage slot when bootstrapping the admin app.

Also known as the "language switcher", it displays a menu allowing users to select the language of the interface.

Email + password form used inside <LoginPage>. Calls authProvider.login() via the useLogin hook and surfaces errors through useNotify. Returns just the form — no surrounding card or layout — so it can be embedded inside any auth shell.

When Authentication is enabled, users must log in to access the admin interface. The login page is displayed automatically when an unauthenticated user tries to access a protected route.

Email-only login form, suitable for magic-link or passwordless flows. Mirrors <LoginForm> but renders a single email field — no password — and uses a Mail icon on the submit button. By default it calls authProvider.login() via useLogin; pass onSubmit to plug in your own passwordless flow.

<Logout> logs the current user out through the configured auth provider.

Sidebar menu container. By default renders a dashboard link (if defined) followed by grouped resource sections and then ungrouped resources.

A clickable sidebar entry that navigates to a route. Building block for custom sidebar menus.

<NotFound> renders the default fallback page for unmatched admin routes.

A notification component based on Shadcn's sonner toasts, supporting undoable actions.

<Offline> renders its children only while the user is offline. With no children, it renders a default banner at the top of the viewport informing the user that the connection has been lost.

Tiny placeholder block used while data is loading. Renders an inline-flex <span> filled with the muted background colour so a row of fields keeps its height during a fetch.

Splash screen displayed when no <Resource> is configured under <Admin>. Renders a welcome panel with links to documentation, the live demo, and the GitHub repository, so new developers see a non-empty page on their first run.

Disabled input used to surface an error from a reference lookup. Shows the label, a disabled input, and the error message below it in the destructive colour.

Forces a data refresh by invalidating react-query's query cache. All the data displayed in the current page (lists, show views, etc.) will be refreshed.

A compact icon-only button that refreshes the current view's data. Wraps the icon in a tooltip with the localized label.

Sidebar entry that links to a resource's list view. Resolves the label, icon and route from the resource definition declared in <Admin>.

Sidebar section that renders related <ResourceMenuItem> entries in a shadcn/ui sidebar group. Labeled groups are collapsible.

A standalone button that opens or closes the main sidebar.

Accessibility helper that lets keyboard users skip past the page chrome and jump directly to the main content.

Lets users switch between light and dark UI themes.

Renders a page title inside the <TitlePortal> slot in the app bar.

Render target for <Title>. Reserves the DOM slot in the app bar where page titles are teleported.

<Toolbar> renders form actions such as SaveButton in a consistent footer.

Container for action buttons positioned at the top right of a view. Convenience wrapper that lays out toolbar items horizontally with end alignment and a small gap.

A user menu component displayed in the top right corner of the admin layout. It provides access to user-related actions such as profile, settings, and logout.