Guide · Open source

How to use react-admin: install, build admin pages and connect an API

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

React-admin is a frontend framework for building single-page admin applications that run in the browser on top of REST or GraphQL APIs. It is aimed at developers who already use React and need internal panels or back-office tools. By the end of this guide you will know how to install it, wire it to an API with a data provider, and build list, edit and create pages.

react-adminmarmelab/react-admin · ★ 27k · MIT Install options & downloads

Quick start

1Install Node.js and npm or yarn. Make sure Node.js and a package manager are available on your machine.
2Install react-admin. Run npm install react-admin in your project folder, or yarn add react-admin.
3Choose or write a data provider. Use an existing provider such as ra-data-simple-rest if it matches your API, or write a custom one.
4Create an Admin app. Render the Admin component with your dataProvider prop in your entry file.
5Define a Resource. Add a Resource component with name and list, edit and create page components for an endpoint.
6Build the page components. Use List, DataTable, Edit, Create and SimpleForm with input components to show and change records.
7Run the examples. Explore the simple, tutorial and demo apps in the examples folder to see working code.

Check the prerequisites and install react-admin

React-admin is distributed through npm. You need Node.js and either npm or yarn installed before you start.

Run the install command in your project folder. The package installs react-admin along with its required dependencies.

Prerequisites: Node.js and npm or yarn
Install with npm or yarn, as shown in the code block

npm install react-admin
#or
yarn add react-admin

Connect your API with a data provider

React-admin talks to your backend through a concept called Data Providers. A data provider is an adapter between react-admin and your API. You can use an existing provider as a blueprint for your API, or write your own to query an existing one.

The example below uses the ra-data-simple-rest provider and points it at a local server. The Admin component receives the provider through its dataProvider prop.

Pick an existing provider from the provider list if your backend matches one
Write a custom data provider when your API does not match an existing one

// in app.js
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { Admin, Resource } from 'react-admin';
import restProvider from 'ra-data-simple-rest';

import { PostList, PostEdit, PostCreate, PostIcon } from './posts';

createRoot(document.getElementById('root')!).render(
    <Admin dataProvider={restProvider('http://localhost:3000')}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} />
    </Admin>
);

Define list, edit and create pages for a resource

The Resource component defines CRUD pages (list, edit and create) for an API endpoint. In the example, the posts resource maps to the /posts endpoint.

Page components use react-admin components to fetch and display data. A List renders a DataTable, an Edit page and a Create page each wrap a SimpleForm with input fields.

List: shows records in a DataTable with columns and an EditButton
Edit: loads one record into a SimpleForm with TextInput and DateInput fields
Create: shows an empty SimpleForm for a new record

// in posts.js
import * as React from "react";
import { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
import BookIcon from '@mui/icons-material/Book';
export const PostIcon = BookIcon;

export const PostList = () => (
    <List>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col source="title" />
            <DataTable.Col source="published_at" field={DateField} />
            <DataTable.Col source="average_note" />
            <DataTable.Col source="views" />
            <DataTable.Col>
                <EditButton />
            </DataTable.Col>
        </DataTable>
    </List>
);

const PostTitle = () => {
    const record = useRecordContext();
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <DateInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
            <TextInput disabled label="Nb views" source="views" />
        </SimpleForm>
    </Edit>
);

export const PostCreate = () => (
    <Create title="Create a Post">
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiline: true }} />
            <TextInput multiline source="body" />
            <TextInput label="Publication date" source="published_at" />
            <TextInput source="average_note" />
        </SimpleForm>
    </Create>
);

Customize or replace parts of the interface

React-admin is built as a library of loosely coupled React components and hooks. You can replace any part of it, such as a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.

The framework is powered by Material UI, react-hook-form, react-router and react-query, and it supports both TypeScript and JavaScript.

Replace any component with your own
TypeScript is optional; you can write plain JavaScript
Use the Documentation for the full API reference

Run the example applications

The react-admin repository includes example apps you can run locally. The simple app is a blog with posts, comments and users. The tutorial app is the one built while following the official tutorial. The demo app is a fictional poster shop admin.

Run these commands from the react-admin project root, as listed in the README.

simple: a simple blog used for e2e tests
tutorial: the app built in the official Tutorial
demo (e-commerce): the official react-admin demo
CRM and helpdesk examples are also included

# At the react-admin project root
make install
# or
yarn install

# Run the simple application
make run-simple

# Run the tutorial application
make build
make run-tutorial

# Run the demo application
make build
make run-demo

What people use it for

Internal admin panels that manage records in an existing REST or GraphQL API
Back-office tools with standard create, edit and list screens for CRUD data
Blog or content admin with posts, comments and users, like the included simple example
CRM or helpdesk style apps with customers and tickets, as shown in the CRM and helpdesk examples

Frequently asked questions

Is react-admin free to use?

React-admin is released under the MIT licence, according to the project's repository details. Commercial support is offered by Marmelab through a separate Enterprise Edition.

What do I need to install react-admin?

You need Node.js and either npm or yarn. Then run npm install react-admin or yarn add react-admin in your project.

Does react-admin work with my API?

The README says yes. It connects to REST or GraphQL APIs through data providers, and you can write a custom provider for an existing API.

Do I have to use TypeScript with react-admin?

No. TypeScript support is opt-in, so you can develop in either TypeScript or plain JavaScript.

What are the alternatives to react-admin?

Projects compared in this directory include Refine, Material UI Dashboard templates and AdminJS. Pick based on whether you want a framework, a ready template, or a different stack.

Where can I get help if something breaks?

The README points to the Documentation, the YouTube video tutorials, the Discord community and the react-admin tag on StackOverflow.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

React-admin suits developers who already use React and need standard CRUD admin screens on top of an existing REST or GraphQL API. It is not a finished tool for non-developers, and it is not a fit for projects that do not use React or for public-facing consumer sites.

Install options & downloads