Refine — React Framework for Building Internal Tools

What it is

Refine is an open-source React framework purpose-built for admin panels, dashboards, and internal tools. It ships data-fetching hooks, authentication, access control, routing, and notification primitives so teams can focus on business logic rather than boilerplate.

Unlike visual builders such as Retool or Appsmith, Refine gives you full code ownership. You write standard React components, use any UI library (Ant Design, Material UI, Chakra, Mantine, or headless), and deploy wherever you want.

How it saves time or tokens

Refine eliminates the repetitive CRUD scaffolding that plagues every internal tool project. Its useTable, useForm, useShow, and useList hooks handle pagination, sorting, filtering, and mutations in a few lines. A data provider abstraction means switching from REST to GraphQL or Supabase requires changing one file, not rewriting every component.

Because Refine generates standard React code, AI coding assistants can read and modify it without learning a proprietary DSL. That reduces token spend when using LLMs for code generation.

How to use

1. Scaffold a new project with the CLI:

npm create refine-app@latest my-admin
cd my-admin
npm run dev

1. Define a data provider that connects to your API. Refine ships providers for REST, GraphQL, Supabase, Strapi, Appwrite, NestJS, Hasura, and Airtable out of the box.

1. Create a resource page using built-in hooks. A typical list page looks like this:

import { useTable } from '@refinedev/antd';
import { Table } from 'antd';

export const ProductList = () => {
  const { tableProps } = useTable({ resource: 'products' });
  return (
    <Table {...tableProps} rowKey='id'>
      <Table.Column dataIndex='name' title='Name' />
      <Table.Column dataIndex='price' title='Price' />
    </Table>
  );
};

1. Register the resource in your app config and Refine auto-generates sidebar navigation, breadcrumbs, and CRUD routes.

Example

import { Refine } from '@refinedev/core';
import dataProvider from '@refinedev/simple-rest';
import { ProductList } from './pages/products';

function App() {
  return (
    <Refine
      dataProvider={dataProvider('https://api.example.com')}
      resources={[
        { name: 'products', list: ProductList }
      ]}
    />
  );
}

This minimal setup gives you a working admin panel with list, create, edit, and delete pages for the products resource.

Related on TokRepo

• Automation Tools — Other tools that speed up internal tooling workflows
• AI Tools for Coding — AI-assisted development tools that pair well with Refine projects

Common pitfalls

• Choosing a UI library before understanding Refine's headless mode. Start headless if your design system is custom; pick Ant Design or Material UI only if you want pre-built components.
• Skipping the inferencer. Refine's @refinedev/inferencer package auto-generates CRUD pages from your API response, saving hours of initial scaffolding.
• Hardcoding API URLs instead of using the data provider abstraction. This defeats the main benefit of Refine and makes backend migrations painful.