Skip to main content
Refine provides seamless integrations with popular UI frameworks and design systems, allowing you to build production-ready admin panels, dashboards, and internal tools with minimal effort.

​
Available UI Integrations

Refine supports multiple UI frameworks out of the box:

Ant Design

Enterprise-level UI components with a complete design system

Material UI

Google’s Material Design implementation for React

Mantine

Modern and fully featured React component library

Chakra UI

Simple, modular and accessible component library

​
Headless Support

Prefer to build your own UI? Refine’s headless core provides all the logic without any UI constraints.

Headless/Custom UI

Build completely custom interfaces with Refine’s headless hooks

​
Architecture

Refine’s UI integrations follow a consistent architecture: 
import { Refine } from "@refinedev/core";
import { ThemedLayout, RefineThemes } from "@refinedev/[ui-framework]";
import { ThemeProvider } from "[ui-framework]";

function App() {
  return (
    <ThemeProvider theme={RefineThemes.Blue}>
      <Refine
        dataProvider={dataProvider}
        resources={[
          {
            name: "products",
            list: "/products",
            create: "/products/create",
            edit: "/products/edit/:id",
            show: "/products/show/:id",
          },
        ]}
      >
        <ThemedLayout>
          {/* Your pages here */}
        </ThemedLayout>
      </Refine>
    </ThemeProvider>
  );
}

​
Core Features

All UI integrations provide:

​
Layout Components

  • ThemedLayout: Pre-built responsive layout with sidebar and header
  • Sider: Collapsible sidebar with navigation menu
  • Header: Top navigation bar with user menu and notifications
  • Breadcrumb: Automatic breadcrumb navigation

​
CRUD Components

  • List: Data grid pages with filtering, sorting, and pagination
  • Create: Forms for creating new records
  • Edit: Forms for editing existing records
  • Show: Read-only detail views

​
Field Components

  • TextField: Display text values
  • NumberField: Formatted number display
  • DateField: Formatted date/time display
  • BooleanField: Checkmarks and icons for boolean values
  • EmailField: Clickable email links
  • UrlField: Clickable URL links
  • ImageField: Image previews
  • FileField: File download links
  • TagField: Colored tags
  • MarkdownField: Rendered markdown content

​
Button Components

  • CreateButton: Navigate to create page
  • EditButton: Navigate to edit page
  • ShowButton: Navigate to show page
  • DeleteButton: Delete records with confirmation
  • ListButton: Navigate to list page
  • RefreshButton: Reload current data
  • SaveButton: Submit forms
  • CloneButton: Duplicate records
  • ExportButton: Export data to CSV/Excel
  • ImportButton: Bulk import data

​
Choosing a UI Framework

Best for:
  • Enterprise applications
  • Complex admin panels
  • Teams familiar with Ant Design
  • Rich data tables and forms
Key Features:
  • 50+ high-quality components
  • Comprehensive design system
  • Excellent TypeScript support
  • Pro Layout for advanced layouts

​
Migration Between UI Frameworks

Refine’s consistent API makes switching between UI frameworks straightforward:
  1. Update package dependencies
  2. Replace UI-specific imports
  3. Adjust component props (most are identical)
  4. Update theme configuration
The core logic, hooks, and data flow remain unchanged.

​
Next Steps

Quick Start

Get started with Refine in minutes

Layout Components

Learn about layout components

CRUD Components

Build CRUD interfaces

Examples

Explore example applications

Build docs developers (and LLMs) love

Get started for freeTalk to us