Quick Start Guide
refine works on any environment you can run React (incl. CRA, Next.js, Remix, Vite etc.)
Although you could take the time to manually set up your environment and install refine packages afterwards, the smart 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 a couple of minutes. It also offers a wide range of options that you can automatically configure for your UI framework, i18n, router, Auth. and data provider settings.
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 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
Once the setup is complete, navigate to the project folder and start your project with:
npm run dev
You can now view refine application at http://localhost:3000 and you should see the output as a table populated with post
& category
data with filter, sort, and pagination features
Since we selected the Do you want to add example pages?
option as Yes
during the CLI project creation phase, refine adds example CRUD pages and the resources
to the app. You can navigate to the example pages and try out the CRUD operations features.
We always recommend to add example pages to your project to get a better understanding of how refine works.
Next Steps
👉 Jump to Tutorials to continue your work and turn the example into a full-blown CRUD application.
👉 Read more on Advanced Tutorials for different usage scenarios.
👉 See the real-life examples built using refine