# Refine — React Framework for Building Internal Tools

> Refine is an open-source React framework for building admin panels, dashboards, and internal tools. It provides data hooks, auth, access control, routing, and notifications — with full code ownership and no vendor lock-in, unlike visual builders.

## Install

Save as a script file and run:

# Refine — React Framework for Building Internal Tools

## Quick Use
```bash
# Create a new Refine project
npm create refine-app@latest my-admin
# Choose: Vite, Ant Design, REST API, Auth Provider
cd my-admin && npm run dev

# Access at http://localhost:5173
```

## Introduction
Refine takes a fundamentally different approach to internal tools. Instead of drag-and-drop visual builders (Appsmith, Retool), Refine is a React meta-framework — you write real React code with Refine hooks and components that handle CRUD operations, authentication, routing, and state management automatically.

With over 34,000 GitHub stars, Refine is the top choice for developers who want the speed of a low-code platform with the flexibility and control of custom React code. You own every line — no vendor lock-in, no limitations.

## What Refine Does
Refine provides React hooks and components that abstract the repetitive parts of building data-intensive applications: useTable for data grids, useForm for create/edit forms, useShow for detail views, and useList/useOne/useMany for data fetching. It is headless — bring your own UI library (Ant Design, Material UI, Chakra, Mantine, or custom).

## Architecture Overview
```
[Refine Application (React)]
        |
   [Refine Core]
   Hooks: useTable, useForm,
   useShow, useList, useNavigation
        |
+-------+-------+-------+
|       |       |       |
[Data     [Auth     [Access
Provider]  Provider] Control]
REST, GraphQL SSO, JWT  RBAC, ABAC
Supabase     Auth0    Casbin
Strapi       Keycloak Custom
Custom       Custom   rules
        |
   [UI Packages (optional)]
   @refinedev/antd
   @refinedev/mui
   @refinedev/chakra-ui
   @refinedev/mantine
   Or fully custom UI
        |
   [Router]
   React Router, Next.js,
   Remix integration
```

## Self-Hosting & Configuration
```tsx
// App.tsx — Refine application setup
import { Refine } from "@refinedev/core";
import { useNotificationProvider } from "@refinedev/antd";
import dataProvider from "@refinedev/simple-rest";
import routerProvider from "@refinedev/react-router";
import { BrowserRouter, Routes, Route } from "react-router";
import { ProductList, ProductCreate, ProductEdit, ProductShow } from "./pages/products";

export default function App() {
  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider("https://api.example.com")}
        routerProvider={routerProvider}
        notificationProvider={useNotificationProvider}
        resources={[{
          name: "products",
          list: "/products",
          create: "/products/create",
          edit: "/products/edit/:id",
          show: "/products/show/:id",
        }]}
      >
        <Routes>
          <Route path="/products" element={<ProductList />} />
          <Route path="/products/create" element={<ProductCreate />} />
          <Route path="/products/edit/:id" element={<ProductEdit />} />
          <Route path="/products/show/:id" element={<ProductShow />} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}
```

## Key Features
- **Headless** — bring your own UI library or go fully custom
- **Data Hooks** — useTable, useForm, useShow for CRUD operations
- **Any Backend** — REST, GraphQL, Supabase, Strapi, Hasura, custom
- **Auth** — pluggable authentication with any identity provider
- **Access Control** — RBAC and ABAC with Casbin integration
- **Real-Time** — live updates via WebSocket or SSE
- **Audit Log** — track all data mutations for compliance
- **Inferencer** — auto-generate CRUD pages from your API schema

## Comparison with Similar Tools
| Feature | Refine | Appsmith | Retool | React Admin | AdminJS |
|---|---|---|---|---|---|
| Approach | Code framework | Visual builder | Visual builder | Code framework | Code framework |
| Customization | Unlimited | Moderate | Moderate | Good | Good |
| UI Flexibility | Any UI library | Built-in widgets | Built-in widgets | Material UI | Custom |
| Vendor Lock-in | None | Low | High | Low | Low |
| Learning Curve | React knowledge | Low | Low | React knowledge | Node.js |
| Best For | Dev teams | Non-devs + devs | Non-devs + devs | Dev teams | Node.js teams |
| GitHub Stars | 34K | 40K | N/A | 25K | 8K |

## FAQ
**Q: Refine vs Appsmith — which should I choose?**
A: Refine if you have React developers and want full code control. Appsmith if you want visual building with minimal coding. Refine produces production-grade code; Appsmith is faster for prototyping.

**Q: Is Refine only for admin panels?**
A: No. While admin panels are the primary use case, Refine works for any data-intensive React application — dashboards, CRMs, ERPs, and B2B applications.

**Q: What is the Inferencer?**
A: The Inferencer auto-generates list, create, edit, and show pages by introspecting your API schema. It creates working CRUD pages in seconds that you can then customize.

**Q: Can I use Refine with Next.js?**
A: Yes. Refine has official Next.js integration with SSR support. Use @refinedev/nextjs-router for Next.js App Router compatibility.

## Sources
- GitHub: https://github.com/refinedev/refine
- Documentation: https://refine.dev/docs
- Website: https://refine.dev
- License: MIT

---
Source: https://tokrepo.com/en/workflows/eb077501-371c-11f1-9bc6-00163e2b0d79
Author: Script Depot