Overview

What is Refine?​

Refine is a meta 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:

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>
);

⚡ 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 UI to 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.

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, 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

💻 Refine Devtools - dive deeper into your app and provide useful insights

✅ Full test coverage

Community​

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

• 🌟 Apply for the Priority support program! You can apply to priority support program and receive assistance from the Refine core team in your private channel.
• Join the Discord community! It is the easiest way to get help and ask questions to the community.
• Join the GitHub Discussions to ask anything about the Refine project or give feedback; we would love to hear your thoughts!
• Learn how to contribute to the Refine!
• Join our Guest Technical Writer Program and become a blog writer for Refine.

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.