Skip to main content
πŸ§™β€β™‚οΈ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx

Overview

What is refine?​

refine is a versatile React framework that enables the rapid development of a wide range of web applications. From internal tools, admin panels, B2B apps and dashboards, it serves as a comprehensive solution for building any type of CRUD applications.

refine's internal hooks and components simplifies the development process and eliminates the repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.

Here's an overview of the refine structure:

App.tsx
const App = () => (
<Refine
dataProvider={dataProvider}
resources={[
{
name: "blog_posts",
list: "/blog-posts",
show: "/blog-posts/show/:id",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
},
]}
>
/* ... */
</Refine>
);
tutorial antd

⚑ refine is headless by design and offers unlimited styling and customization possibilities, empowering developers to create tailored and fully functional applications that meet specific project requirements.

Utilizing integrated technologies you can efforlessly develop industry-standard CRUD applications with refine.

What do you mean by "headless" ?​

Instead of being limited to a set of pre-styled components, refine provides collections of helper hooks,Β componentsΒ andΒ providers and more. Since business logic and UI are completely decoupled, you can customize UI without constraints.

It means, refine just works seamlessly with any custom designs or UI frameworks. Thanks to it's headless architecture, you can use popular CSS frameworks like TailwindCSS or even create your own styles from scratch.

refine also provides integrations with Ant Design, Material UI, Mantine, and Chakra UIto get you started quickly. These libraries are set of components which are nicely integrated with headless @refinedev/core package.

Headless in Routing​

For the routing, refine's headless approach shines too. It doesn't tie you to a single routing method or library. Instead, it offers a simple routing interface with built-in integrations for popular libraries.

This means you can use refine seamlessly in different platforms like React Native, Electron, Next.js, Remix etc. without any extra steps for the setup.

Use cases​

refine shines when it comes to data-intensive applications like admin panels, dashboards and internal tools.

refine diagram

Key Features​

βš™οΈ Zero-config, one-minute setup with a single CLI command

πŸ”Œ Connectors for 15+ backend services including REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase, Nestjs-Query and Directus.

🌐 SSR support with Next.js or Remix

πŸ” Auto-generation of CRUD UIs based on your API data structure

βš› Perfect state management & mutations with React Query

πŸ”€ Advanced routing with any router library of your choice

πŸ” Providers for seamless authentication and access control flows

⚑ Out-of-the-box support for live / real-time applications

πŸ“„ Easy audit logs & document versioning

πŸ’¬ Support for any i18n framework

πŸ’ͺ Future-proof, robust architecture

βŒ›οΈ Built-in CLI with time-saving features

βœ… Full test coverage

Community​

refine has a very friendly community and we are always happy to help you get started:

Next Steps​

πŸ‘‰ Continue with the Quickstart guide to setup and run your first refine project.

πŸ‘‰ Jump directly to the Tutorial to learn refine by building a full-blown CRUD application.