TiloBox
Back to directory
Refine project preview
Developer ToolsAlternative to RetoolAlternative to Forest Admin

Refine

Open-source React-based framework for rapid development of web applications, admin panels, and CRMs.

View on GitHub Visit website
LicenseMIT
GitHub stars35.6k
Last commit2 months ago
Tags6 topics
Internal ToolsReactCrudAdmin PanelTypescriptFramework
Overview

Why consider Refine?

Refine is a metadata-driven React framework for building enterprise internal tools, admin panels, and dashboards. It integrates seamlessly with Ant Design, Material UI, Tailwind, and Supabase.

Guided learning

Learn Refine by building

Practical setup notes, real use cases, and copy-ready examples in one focused guide.

4 min read 11 sections
In this guide11 sections

What is Refine?

Refine is an open-source, React-based meta-framework designed for building enterprise internal tools, administrative dashboards, B2B applications, and Customer Relationship Management (CRM) portals. It operates as a code-first, developer-centric alternative to proprietary low-code platforms like Retool and Forest Admin.

Refine decouples state management, authentication, access control, routing, and data synchronization from user interface rendering. It connects out of the box with popular UI libraries (Ant Design, Material UI, Mantine, Tailwind CSS) and backend services (Supabase, Appwrite, Strapi, Hasura, NestJS, REST, GraphQL).

Who Is It For?

  • Frontend & Full-Stack Developers: Building customized, production-grade administrative panels and CRUD applications with 100% code control.
  • Enterprise Engineering Teams: Delivering secure internal applications that adhere to strict company design systems without low-code vendor lock-in.
  • SaaS Developers: Rapidly developing multi-tenant customer management portals with complex data validation and filtering rules.

Key Features

  • Headless architecture: Complete freedom to choose any UI library (Ant Design, Material UI, Mantine, or custom Tailwind CSS).
  • 15+ built-in backend Data Providers: Instant integration with REST APIs, GraphQL, Supabase, Strapi, NestJS, and Hasura.
  • Automated CRUD operations: Pre-configured React hooks (useTable, useForm, useList, useShow) handling sorting, filtering, and pagination.
  • Robust enterprise authentication and authorization (Access Control / RBAC) hooks.
  • Native support for Server-Side Rendering (SSR) with Next.js and Remix.

Quick Start: Creating a Refine Application

Bootstrap a new Refine project using the interactive CLI wizard:

bash
1# Create a new Refine project with Next.js and Tailwind CSS
2npm create refine-app@latest my-refine-app
3
4# Choose your preferred framework, UI library, and backend data provider:
5# - Framework: Next.js
6# - UI Framework: Tailwind CSS / Ant Design
7# - Data Provider: Supabase / REST API
8# - Auth Provider: Custom / Supabase Auth
9
10cd my-refine-app
11npm run dev

Example: Building a CRUD Resource in React

tsx
1import { useTable, List } from "@refinedev/core";
2
3export const ProductList = () => {
4 const { tableQueryResult } = useTable({
5 resource: "products",
6 pagination: { pageSize: 10 },
7 });
8
9 const products = tableQueryResult?.data?.data ?? [];
10
11 return (
12 <List>
13 <table className="min-w-full divide-y divide-gray-200">
14 <thead>
15 <tr>
16 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
17 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
18 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
19 </tr>
20 </thead>
21 <tbody className="bg-white divide-y divide-gray-200">
22 {products.map((p) => (
23 <tr key={p.id}>
24 <td className="px-6 py-4 whitespace-nowrap">{p.id}</td>
25 <td className="px-6 py-4 whitespace-nowrap">{p.name}</td>
26 <td className="px-6 py-4 whitespace-nowrap">${p.price}</td>
27 </tr>
28 ))}
29 </tbody>
30 </table>
31 </List>
32 );
33};

Practical Use Cases

1. B2B Multi-Tenant SaaS Admin Portal

An engineering team builds a customer account management portal connecting to Supabase with real-time row-level security and automated data tables.

2. E-Commerce Order Management Dashboard

A retailer builds a custom order processing dashboard with Ant Design and GraphQL, managing hundreds of orders, stock updates, and refund dispatches.

3. Microservice Orchestration Console

A platform team builds an internal tool with Next.js SSR that aggregates multiple internal microservice REST APIs into a single developer dashboard.

Troubleshooting and Limitations

  • Data Provider Response Structure: When writing custom Data Providers, ensure your API responses follow Refine's expected structure ({ data: [...], total: 100 }) to ensure automatic pagination functions correctly.
  • Custom Access Control Integration: Implement the accessControlProvider interface to integrate custom role-based permissions (CASL, Cerbos, Ory Keto).

Official Resources

Related tools

More options with a similar category or technology profile.

diskus logo

diskus

Minimal, fast alternative to du -sh written in Rust using multi-threaded directory traversal.

peco logo

peco

Simplistic interactive filtering tool for Unix pipelines, process lists, and file trees.

Dapr CLI logo

Dapr CLI

Command-line tool for managing Dapr distributed application runtime environments and sidecars.

Freeze logo

Freeze

Generate beautiful image screenshots and SVGs of code snippets and terminal outputs.

Refine FAQs

Refine is listed as a Developer Tools tool on TiloBox. Review the overview, features, and official documentation on this page to decide whether it solves your specific workflow.

Start with the project's GitHub repository and official website for supported installation and deployment instructions. Test the setup with representative data or a small project before rolling it out more widely.

Refine is listed under the MIT license. Read the complete license text and the project's notices before using, modifying, or distributing the software.

Production readiness depends on your requirements. Review maintenance activity, security practices, documentation, backup and upgrade procedures, and compatibility with your stack; then validate it in a non-production environment.

Refine is listed as an alternative to Retool. Compare the core workflow, deployment model, integrations, and licensing against your must-have requirements before switching.