
  • Documentation
  • Demos
  • Blog
  • Enterprise Edition
  • 4.16
    • latest (5.8.2)
    • 5.7
    • 5.6
    • 5.5
    • 5.4
    • 5.3
    • 5.2
    • 5.1
    • 5.0
    • 4.16
    • 3.19
    • 2.9
    • Older versions
    • Getting Started
    • Tutorial
    • Features
    • Key concepts
    • What's new?
    • Create React Admin
    • Vite
    • Next.js
    • Remix
    • Community
    • Upgrading to v4
      App Configuration
    • <Admin>
    • <Resource>
    • <CustomRoutes>
      Data Fetching
    • Introduction
    • Supported backends
    • Writing A Data Provider
    • Querying the API
    • Real-time Updates & Locks
    • useDataProvider
    • useGetList
    • useInfiniteGetList
    • useGetOne
    • useGetMany
    • useGetManyReference
    • useCreate
    • useUpdate
    • useUpdateMany
    • useDelete
    • useDeleteMany
    • useGetTree
    • withLifecycleCallbacks
    • fetchJson
      Security
    • Introduction
    • Supported backends
    • Writing An Auth Provider
    • Permissions
    • RBAC
    • <Authenticated>
    • <IfCanAccess>
    • <WithPermissions>
    • useAuthProvider
    • useAuthenticated
    • useAuthState
    • useGetIdentity
    • useLogin
    • useLogout
    • usePermissions
    • useCanAccess
    • canAccess
    • addRefreshAuthToAuthProvider
    • addRefreshAuthToDataProvider
      List Page
    • Introduction
    • Filtering The List
    • <List>
    • <ListBase>
    • <ListGuesser>
    • <InfiniteList>
    • <TreeWithDetails>
    • <Datagrid>
    • <DatagridAG>
    • <SimpleList>
    • <SingleFieldList>
    • <EditableDatagrid>
    • <Calendar>
    • <FilterButton>
    • <FilterList>
    • <FilterLiveSearch>
    • <SavedQueriesList>
    • <StackedFilters>
    • <Pagination>
    • <SortButton>
    • <SelectColumnsButton>
    • <Count>
    • <WithListContext>
    • useListContext
    • useList
    • useListController
    • useUnselect
    • useUnselectAll
      Creation & Edition Pages
    • Introduction
    • Form Validation
    • <Create>
    • <CreateBase>
    • <Edit>
    • <EditBase>
    • <EditGuesser>
    • <SimpleForm>
    • <TabbedForm>
    • <Form>
    • <LongForm>
    • <AccordionForm>
    • <WizardForm>
    • <EditDialog>
    • <EditInDialogButton>
    • <CreateDialog>
    • <CreateInDialogButton>
    • <JsonSchemaForm>
    • <Toolbar>
    • <SaveButton>
    • <AutoSave>
    • useCreateContext
    • useCreateController
    • useEditContext
    • useEditController
    • useSaveContext
    • useRegisterMutationMiddleware
    • useUnique
      Show Page
    • Introduction
    • <Show>
    • <ShowBase>
    • <ShowGuesser>
    • <SimpleShowLayout>
    • <TabbedShowLayout>
    • <Labeled>
    • <ShowInDialogButton>
    • useShowContext
    • useShowController
      Common
    • <WithRecord>
    • useRecordContext
    • useGetRecordId
    • useNotify
    • useRedirect
    • useRefresh
      Fields
    • Introduction
    • Fields for Relationships
    • <ArrayField>
    • <BooleanField>
    • <ChipField>
    • <DateField>
    • <EmailField>
    • <FileField>
    • <FunctionField>
    • <ImageField>
    • <MarkdownField>
    • <NumberField>
    • <ReferenceField>
    • <ReferenceArrayField>
    • <ReferenceManyField>
    • <ReferenceManyCount>
    • <ReferenceManyToManyField>
    • <ReferenceOneField>
    • <RichTextField>
    • <SelectField>
    • <TextField>
    • <TranslatableFields>
    • <UrlField>
    • <WrapperField>
      Inputs
    • Introduction
    • <ArrayInput>
    • <AutocompleteInput>
    • <AutocompleteArrayInput>
    • <BooleanInput>
    • <CheckboxGroupInput>
    • <DateInput>
    • <DateTimeInput>
    • <DualListInput>
    • <FileInput>
    • <ImageInput>
    • <MarkdownInput>
    • <NullableBooleanInput>
    • <NumberInput>
    • <PasswordInput>
    • <PredictiveTextInput>
    • <RadioButtonGroupInput>
    • <ReferenceInput>
    • <ReferenceArrayInput>
    • <ReferenceManyInput>
    • <ReferenceManyToManyInput>
    • <ReferenceNodeInput>
    • <ReferenceOneInput>
    • <RichTextInput>
    • <SearchInput>
    • <SelectInput>
    • <SelectArrayInput>
    • <SimpleFormIterator>
    • <SmartRichTextInput>
    • <TextInput>
    • <TimeInput>
    • <TranslatableInputs>
    • <TreeInput>
    • useInput
      Preferences
    • Introduction
    • useStore
    • useRemoveFromStore
    • useResetStore
    • useStoreContext
    • <Configurable>
      I18N Provider and Translations
    • Introduction
    • Setting Up
    • Supported Locales
    • Translating UI Components
    • Writing an i18nProvider
    • useTranslate
    • useLocaleState
    • <LocalesMenuButton>
      Other UI components
    • <Layout>
    • <ContainerLayout>
    • <SolarLayout>
    • <AppBar>
    • <Menu>
    • <MultiLevelMenu>
    • <IconMenu>
    • <Title>
    • <Breadcrumb>
    • <Search>
    • <SearchWithResult>
    • <Confirm>
    • Buttons
    • <RevisionsButton>
    • <CheckForApplicationUpdate>
    • <UpdateButton>
    • <RecordRepresentation>
    • <PrevNextButtons>
    • useDefineAppLocation
    • useGetRecordRepresentation
      Theming
    • Introduction
    • The sx prop
    • Application Theme
    • <Box>, <Stack> and <Grid>
    • <ToggleThemeButton>
    • useMediaQuery
    • useTheme
      Realtime
    • Introduction
    • Data Provider Requirements
    • usePublish
    • useSubscribe
    • useSubscribeCallback
    • useSubscribeToRecord
    • useSubscribeToRecordList
    • useLock
    • useUnlock
    • useGetLock
    • useGetLockLive
    • useGetLocks
    • useGetLocksLive
    • useLockOnMount
    • useLockOnCall
    • useGetListLive
    • useGetOneLive
    • <ListLive>
    • <EditLive>
    • <ShowLive>
    • <MenuLive>
      Recipes
    • Caching
    • Routing
    • Unit Testing
    • Advanced tutorials
  • Ecosystem
  • FAQ
  • Index
  • Beginner mode is on. Turn it off to reveal more documentation for advanced components.

Advanced Tutorials

If you want to learn the best practices of react-admin development by example, you’ve come to the right place. This page lists the advanced tutorials we’ve published on the react-admin blog.

  • 2023-11: Using React-Admin With DaisyUI, Tailwind CSS, Tanstack Table and React-aria
  • 2023-10: Creating a Record Related to the Current One
  • 2023-09: Authentication using ActiveDirectory
  • 2023-08: Building AI-Augmented Apps
  • 2023-07: Building a Kanban Board
  • 2023-04: Building A Custom Tags Selector
  • 2023-03: Creating Custom Form Layouts
  • 2022-12: Multi-Tenant Single-Page Apps: Dos and Don’ts
  • 2022-11: Building a B2B app with Strapi and React-Admin
  • 2022-10: Writing A Data Provider For Offline-First Applications
  • 2022-04: Introducing React-admin V4

Older blog posts contain advice that can be outdated. We keep them here for reference.

  • 2021-12: Building A Retro React-Admin Theme For Fun And Profit
  • 2021-10: Using An SQLite Database Live In React-Admin
  • 2020-12: Managing a User Profile
  • 2020-11: Changing The Look And Feel Of React-Admin Without JSX
  • 2020-08: Handling JWT in Admin Apps the Right Way
  • 2020-04: Custom Forms and UI for related records
  • 2019-11: Introducing React-admin v3
  • 2019-03: Supplying your own Defaults to React Admin
  • 2019-03: Adding a User Profile Page
  • 2019-02: Creating and Editing a Record From the List Page
  • 2019-01: Building a Timeline as a replacement for a List component