Refine Documentation | Guides, Tutorials & API Reference in Refine v5

What is Refine?

Refine is a React meta-framework for CRUD-heavy web applications. It addresses a wide range of enterprise use cases including internal tools, admin panels, dashboards and B2B apps.

Refine's core hooks and components streamline the development process by offering industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.

Refine's headless architecture enables the building of highly customizable applications by decoupling business logic from UI and routing. This allows integration with:

• Any custom designs or UI frameworks like TailwindCSS, along with built-in support for Ant Design, Material UI, Mantine, and Chakra UI.

• Various platforms, including Next.js, Remix, React Native, Electron, etc., by a simple routing interface without the need for additional setup steps.

Why Refine?

Within the broad spectrum of development approaches, Refine occupies a unique sweet spot between “starting from scratch” with traditional development method and low-code/no-code solutions. With their respective initial pros at the beginning of development, both of the two extreme approaches may present long-term risks:

Despite offering the ultimate level flexibility, “Starting from scratch” method is likely to cause

• Project delays
• Technical debt
• Maintenance problems
• Lack of development and security best practices
• A polluted codebase
• And lack of standardization across teams

Low/no-code solutions address this shortcoming but create a new set of challenges such as

• Vendor lock-in
• Lack of customization & styling options
• Poor developer experience
• And limited support for complex use-cases

Offering the best from both worlds, Refine mitigates all risks of “from scratch” development without compromising from flexibility, agility and open technologies.

Overview of the Refine structure

<!-- import { MUIExample } from './example/mui'; --> <!-- <MUIExample /> -->

import { MUISandpack } from './example/sandpack';

<MUISandpack />

Use cases

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

<a href="https://refine.dev/templates/"> </a>

Key Features

• Refine Devtools - dive deeper into your app and provide useful insights
• 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 & Remix and Advanced routing with any router library of your choice
• Auto-generation of CRUD UIs based on your API data structure
• Perfect state management & mutations with React Query
• Providers for seamless authentication and access control flows
• Out-of-the-box support for live / real-time applications
• Easy audit logs & document versioning

Community

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

• 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!

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.