Skip to content
Get packs

Guide · Open source

How to use Refine: create an admin panel in React

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

Refine is an open-source framework for building internal tools, admin panels, dashboards and B2B applications in React. This guide explains what it does, how to start a project with its CLI, and where it fits compared with other admin tools. By the end, you will know how to create a new Refine project and what the main pieces of a back-office app are.

refinerefinedev/refine · ★ 36k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and npm, or another JavaScript package manager, are installed on your machine.
  2. 2Open a terminal in your project folder. Choose the folder where the new Refine project should be created.
  3. 3Run the Refine CLI. Run npm create refine-app@latest to generate a new project.
  4. 4Follow the CLI prompts. Answer the questions the CLI asks to set up your new project.
  5. 5Explore the generated project. Open the project files and review how the app is structured before adding your own screens.
  6. 6Connect your backend API. Point Refine at your REST, GraphQL or similar data source so it can load and save records.

What Refine is and who it is for

Refine is a TypeScript framework built on React. It is aimed at developers who need internal tools, admin panels, dashboards and B2B applications.

Refine is headless. It supplies the logic and data handling, such as fetching data, tables and forms, while you choose the look of the interface and the UI component library.

  • Good fit: developers building back-office tools in React who want to pick their own UI library.
  • Good fit: projects that connect to REST, GraphQL or similar backend APIs and need standard CRUD screens.
  • Not a fit: non-developers who want a no-code app builder, because you write React and TypeScript code.
  • Not a fit: simple static websites or small single-page apps that do not need admin-style data screens.

What you need before you install Refine

You need Node.js and npm or another JavaScript package manager. Refine is installed through a package manager, and the project is created with the Refine CLI.

Some familiarity with React and TypeScript is expected, since the framework is built on React and written in TypeScript.

  • Node.js
  • npm or another JavaScript package manager
  • Working knowledge of React and TypeScript

Create a new Refine project with the CLI

The README's install method is to create a new project with the Refine CLI. Run the command below in the folder where you want the project to live.

After the command finishes, follow the prompts and the generated project files to start the app.

npm create refine-app@latest

Understand the core ideas before you build screens

Refine's headless design means the framework handles data and logic, and you handle presentation. This separation is the main reason developers use it: common pieces such as data fetching, tables and forms do not have to be rebuilt for each new back-office app.

Because Refine works with REST, GraphQL and similar APIs, your backend choice is flexible. Plan which resources your admin panel needs to list, create, edit and delete before you start.

  • Headless: logic and data handling come from Refine; the look comes from you.
  • UI freedom: you pick the component library.
  • Data sources: REST, GraphQL or similar backend APIs.

Compare Refine with similar tools

Refine is often compared with react-admin, which is also a React framework for admin interfaces. AdminJS is another option in this space. Apache Superset is a different kind of product focused on data exploration and dashboards.

Retool is a commercial tool. It is listed here only for comparison and is not part of Refine's open-source project. Choose based on whether you want to write React code with a headless framework or use a tool with a more finished interface.

  • react-admin: comparable React admin framework.
  • AdminJS: alternative admin panel option.
  • Apache Superset: alternative focused on data exploration and dashboards.
  • Retool: commercial tool, included for comparison only.

What people use it for

  • Building an internal back-office tool for managing customers or orders.
  • Creating an admin panel with standard list, create, edit and delete screens for a backend API.
  • Making a B2B dashboard in React where your team controls the UI component library.
  • Replacing repeated hand-written data fetching and form code across several internal apps.

Frequently asked questions

Is Refine free to use?

Refine is released under the MIT licence, according to its repository. You can read the licence text in the project to confirm the terms before using it commercially.

What do I need to install Refine?

The install method is through a package manager. You need Node.js and npm or another JavaScript package manager, and the project is created with npm create refine-app@latest.

Do I need to know React to use Refine?

Yes. Refine is a framework built on React and written in TypeScript, and it requires you to write React and TypeScript code. It is not a no-code tool.

Is Refine a no-code app builder?

No. Refine is for developers. If you want to build apps without writing code, a no-code tool such as Retool may be a better fit, though Retool is commercial.

What is the difference between Refine and react-admin?

Both are React frameworks for admin interfaces. Refine is headless, so you choose the UI component library, and the source describes it as built for internal tools, admin panels, dashboards and B2B apps. Try both on a small resource to see which fits your team.

Can Refine connect to my existing API?

The description says Refine works with REST, GraphQL or similar backend APIs. Check the documentation at the project homepage, refine.dev, for the exact setup steps for your API.

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

Refine suits React developers who are building internal tools, admin panels or B2B dashboards and want a headless framework that lets them pick the UI. It is not a good choice if you want a no-code builder, a simple static site or a small app without admin-style data screens.

Install options & downloads