Quick Start Guide

refine works on any environment that can run React (incl. CRA, Next.js, Remix, Vite etc.)

Although you could take the time to manually set up your environment and install the refine packages afterwards, the optimal way to get started with refine is using the project starter tool.

create refine-app provides built-in templates for CRA, Next.js and Remix environments, so you can bootstrap a refine project in just a couple of minutes. It also offers a wide range of options that you can easily configure for your UI framework, i18n, router, Auth. and data provider preferences.

To get started, please run the following command. The CLI wizard will assist you for the rest of the setup process:

npm create refine-app@latest my-project

It will create your refine project and install the required packages according to your selections. After completing the setup, navigate to the project folder and start your application with:

npm run dev

You can now view refine application at http://localhost:3000:

Quick Start Example

We will now show how you can use the CLI to bootstrap a refine app with Ant Design and React. You can also use Material UI, Chakra UI and Mantine as well.

npm create refine-app@latest  my-antd-project

Select the following options to complete CLI wizard:

? Select your project type:
❯ refine-react

? Do you want to use a UI Framework?:
❯ Ant Design

? Do you want a customized theme?:
❯ Default theme

? Router Provider:
❯ React Router v6

? Data Provider:
❯ REST API

? Auth Provider:
❯ None

? Do you want to add example pages?
❯ Yes

? Do you want a customized layout?
❯ No

info

We are showing only the important options with this example. You can prefer to select other options like Kbar and i18n but different options selections may be result in a different project structure.

Once the setup is complete, navigate to the project folder and start your project with:

npm run dev

You can now view your refine application at http://localhost:3000. You should see the output as a table populated with post and category data with filter, sort, and pagination features

tip

If you say Yes to the Do you want to add example pages? option during the CLI wizard, refine will add example CRUD pages and the resources prop to your app. You can navigate to the example pages to try out the CRUD operation features

We always recommend adding examples pages to your project to get a better understanding of how refine works.

Next Steps

👉 Jump to Tutorials and continue your work to turn your example project into a full-blown CRUD application! 🚀

👉 Read more on Advanced Tutorials for different usage scenarios.

👉 See real-life examples built using refine