Skip to main content
Refine works on any environment that can run React, including Vite, Next.js, Remix, and Create React App. The optimal way to get started with Refine is using the create-refine-app CLI tool or the browser-based scaffolder.

​
Prerequisites

Before installing Refine, make sure you have the following:
  • Node.js version 20 or higher
  • A package manager: npm, yarn, pnpm, or bun
Refine requires Node.js 20 or higher. You can check your Node.js version by running node -v in your terminal.

​
Quick installation

The fastest way to create a new Refine project is using the create-refine-app CLI tool: 
npm create refine-app@latest my-refine-app

​
Interactive setup

When you run create-refine-app, you’ll be guided through an interactive setup process:
1

Choose your project name

Enter a name for your project directory.
2

Select your platform

Choose your preferred development platform:
  • Vite - Fast, modern build tool (recommended)
  • Next.js - React framework with SSR support
  • Remix - Full-stack React framework
3

Pick a UI framework

Select a UI library or go headless:
  • Headless - Build your own UI with complete freedom
  • Ant Design - Enterprise-grade UI components
  • Material UI - Google’s Material Design components
  • Mantine - Modern React component library
  • Chakra UI - Simple and modular component library
4

Choose a data provider

Select your backend integration:
  • REST API - Simple REST data provider
  • GraphQL - GraphQL client integration
  • Supabase - Open source Firebase alternative
  • Strapi - Headless CMS
  • NestJS - Progressive Node.js framework
  • And 10+ more options
5

Configure authentication

Choose an authentication strategy or start without auth.
6

Install dependencies

The CLI will automatically install all required dependencies.
You can skip the interactive prompts by providing command-line arguments. Run npm create refine-app@latest -- --help to see all available options.

​
Browser-based scaffolder

Prefer to preview your setup before downloading? Use Refine’s browser-based scaffolder:
  1. Visit refine.dev
  2. Configure your project using the interactive UI
  3. Preview the generated code in real-time
  4. Download your customized project
The browser scaffolder provides the same configuration options as the CLI and lets you see exactly what you’re getting.

​
Manual installation

If you prefer to add Refine to an existing React project, you can install the core package manually: 
npm install @refinedev/core @tanstack/react-query
Refine uses React Query (TanStack Query) for data fetching and state management, so it must be installed alongside @refinedev/core.

​
Additional packages

Depending on your setup, you may want to install additional packages: Data providers: 
npm install @refinedev/simple-rest
Router providers: 
npm install @refinedev/react-router react-router-dom
UI frameworks: 
npm install @refinedev/mui @mui/material @mui/x-data-grid

​
Start development server

Once installation is complete, navigate to your project directory and start the development server: 
cd my-refine-app
npm run dev
Your Refine application will be available at http://localhost:5173 (Vite) or http://localhost:3000 (Next.js/Remix).

​
What’s next?

Quick start tutorial

Build your first Refine app with a step-by-step guide

Project structure

Understand how Refine projects are organized

Core concepts

Learn the fundamental concepts behind Refine

Data providers

Connect Refine to your backend API

Build docs developers (and LLMs) love

Get started for freeTalk to us