Welcome to refine!

refine is a headless Framework, so it does not include UI Components by default.

There are two ways to add UI elements to refine;

1. Using a UI Library such as Tailwind, Chakra UI, etc.
2. Using a complete UI Framework such as Ant Design, Material UI, Mantine, Chakra UI etc.

These tutorials will go through process of building a simple admin panel for a CMS-like application.

Step by step, you're going to learn how to consume a REST API and add basic CRUD functionality to your panel leveraging the unique capabilities of refine.

Prerequisites

refine is composed of several popular libraries to make modern web development easier. Unfortunately, we can't teach all of those technologies from scratch during this tutorial, so we're going to assume you are already familiar with core React concepts.

Node.js and NPM/PnPM/Yarn Versions

If your system versions do not meet both requirements, the installation bootstrap will result in an ERROR.

• node: >=16.x
• yarn: >=1.15 or npm: >=8.x or PnPm: >=7.x

To check, please run the following commands from your terminal:

node -v
npm -v # for npm users
pnpm -v # for pnpm users
yarn -v # for yarn users

Then continue with the next step when ready!

Tutorials

Instead of being a limited set of pre-styled components, refine is a collection of helper hooks, components, and providers. They are all decoupled from UI components and business logic, so that they never keep you from customizing your UI or coding your own flow.

Our Tailwind CSS tutorial below is a good starting point for users who want to go headless. For convenience, refine ships with ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI.

Tailwind CSS

Ant Design

Mantine

Material UI

Chakra UI