Skip to main content
The add command helps you quickly add new resources, providers, and integrations to your Refine application.

​
Usage

refine add [subcommand] [options]

​
Subcommands

  • refine add resource - Add new resources (CRUD pages)
  • refine add provider - Add provider implementations
  • refine add integration - Add UI framework integrations

​
Interactive Mode

Run without arguments to enter interactive mode: 
refine add
Output
? What would you like to add?
  ❯ Resource
    Provider
    Integration

​
Add Resource

Generate CRUD pages for a new resource.

​
Usage

refine add resource [resources...] [options]

​
Arguments

​
resources...
string[]
Names of resources to create. You can specify multiple resources at once.
refine add resource products categories

​
Options

​
-p, --path <path>
string
Path to generate resource files
refine add resource products --path src/pages
​
-a, --actions <actions>
string
default:"list,create,edit,show"
Only generate specified resource actions. Provide as comma-separated list.
refine add resource products --actions list,create,edit

​
Examples

​
Create a Single Resource

refine add resource products
Generates:
  • src/pages/products/list.tsx - List page
  • src/pages/products/create.tsx - Create page
  • src/pages/products/edit.tsx - Edit page
  • src/pages/products/show.tsx - Show page

​
Create Multiple Resources

refine add resource products categories users

​
Create Specific Actions Only

refine add resource products --actions list,create
Generates only:
  • src/pages/products/list.tsx
  • src/pages/products/create.tsx

​
Custom Output Path

refine add resource products --path src/features/products

​
Interactive Mode

refine add resource
Output
? Enter resource name: products
? Select actions to generate:
  ✓ list
  ✓ create
  ✓ edit
  ✓ show

​
Add Provider

Add provider implementations to your project.

​
Usage

refine add provider [providers...] [options]

​
Arguments

​
providers...
string[]
Provider types to add. Available providers:
  • auth - Authentication provider
  • data - Data provider
  • live - Live/realtime provider
  • access-control - Access control provider
  • notification - Notification provider
  • i18n - Internationalization provider
  • audit-log - Audit log provider
refine add provider auth data

​
Options

​
-p, --path <path>
string
Path to generate provider files
refine add provider auth --path src/providers

​
Available Providers

​
Auth Provider

Manage user authentication and authorization: 
refine add provider auth
Generates: src/providers/auth-provider.tsx

​
Data Provider

Communicate with your API: 
refine add provider data
Generates: src/providers/data-provider.tsx

​
Live Provider

Enable real-time updates and synchronization: 
refine add provider live
Generates: src/providers/live-provider.tsx

​
Access Control Provider

Manage user permissions and roles: 
refine add provider access-control
Generates: src/providers/access-control-provider.tsx

​
Notification Provider

Display in-app alerts and messages: 
refine add provider notification
Generates: src/providers/notification-provider.tsx

​
i18n Provider

Support multiple languages and locales: 
refine add provider i18n
Generates: src/providers/i18n-provider.tsx

​
Audit Log Provider

Display audit logs for your resources: 
refine add provider audit-log
Generates: src/providers/audit-log-provider.tsx

​
Examples

​
Add Single Provider

refine add provider auth
Output
✓ Auth provider created at src/providers/auth-provider.tsx

​
Add Multiple Providers

refine add provider auth data access-control
Output
✓ Auth provider created at src/providers/auth-provider.tsx
✓ Data provider created at src/providers/data-provider.tsx  
✓ Access Control provider created at src/providers/access-control-provider.tsx

​
Custom Output Path

refine add provider auth --path src/core/providers

​
Interactive Mode

refine add provider
Output
? Select providers to add:
  ❯ ✓ Auth provider - Manage user authentication and authorization
    ✓ Data provider - Communicate with your API
    ○ Live provider - Enable real-time updates and synchronization
    ○ Access Control - Manage user permissions & roles
    ○ Notification provider - Display in-app alerts and messages
    ○ I18n provider - Support multiple languages and locales
    ○ Audit Log provider - Display audit logs for your resources

​
Add Integration

Add UI framework and router integrations to your project.

​
Usage

refine add integration [name] [options]

​
Arguments

​
name
string
Name of the integration to add. Available integrations:
  • ant-design - Ant Design UI framework
  • react-router - React Router integration
refine add integration ant-design

​
Available Integrations

​
Ant Design

Add Ant Design UI framework to your project: 
refine add integration ant-design
This will:
  • Install @refinedev/antd package
  • Add necessary imports to your app
  • Configure Ant Design theme
  • Set up required components

​
React Router

Add React Router integration: 
refine add integration react-router
This will:
  • Install @refinedev/react-router-v6 package
  • Set up routing configuration
  • Add necessary providers
  • Configure route definitions

​
Examples

​
Add Ant Design

refine add integration ant-design
Output
✓ Installing @refinedev/antd
✓ Updating App.tsx
✓ Adding Ant Design configuration
✓ Integration complete!

​
Add React Router

refine add integration react-router
Output
✓ Installing @refinedev/react-router-v6
✓ Setting up router configuration  
✓ Updating App.tsx
✓ Integration complete!

​
Interactive Mode

refine add integration
Output
? Select integration to add:
  ❯ Ant Design
    React Router

​
Common Workflows

​
Setting Up a New Project

  1. Add authentication: 
    refine add provider auth
  2. Add your first resource: 
    refine add resource products
  3. Configure data provider: 
    refine add provider data

​
Adding a Complete Feature

# Add resource with specific actions
refine add resource orders --actions list,show

# Add access control
refine add provider access-control

# Add notifications
refine add provider notification

​
Migrating to a New UI Framework

refine add integration ant-design

​
Generated File Structure

After running add commands, your project structure might look like: 
src/
├── pages/
│   ├── products/
│   │   ├── list.tsx
│   │   ├── create.tsx
│   │   ├── edit.tsx
│   │   └── show.tsx
│   └── categories/
│       ├── list.tsx
│       └── create.tsx
├── providers/
│   ├── auth-provider.tsx
│   ├── data-provider.tsx
│   └── access-control-provider.tsx
└── App.tsx

​
Next Steps

After adding resources and providers:
  1. Update your App.tsx to register new resources
  2. Configure providers with your API endpoints
  3. Customize generated pages to match your requirements
  4. Add validation and business logic
  5. Test your changes with refine dev

​
Troubleshooting

​
Files Already Exist

If files already exist at the target location, the command will prompt you to confirm overwriting or choose a different path.

​
Import Errors After Adding Integration

If you see import errors: 
rm -rf node_modules package-lock.json
npm install

​
Generated Code Doesn’t Match UI Framework

Ensure you’re using the add command after selecting your UI framework, or the generated code will use a default template.
  • dev - Start development server to test your changes
  • build - Build your app after adding new features
  • update - Update Refine packages

Build docs developers (and LLMs) love

Get started for freeTalk to us