Skip to main content

Admin Component

** Last Built**: September 2, 2025 at 4:19 PM The <Admin> component is the main application wrapper for React SuperAdmin applications. It provides the core context, configuration, and provider management for the entire admin interface.

Overview​

The Admin component serves as the root wrapper that:

  • Provides the SuperAdmin context to all child components
  • Manages data providers, authentication, and internationalization
  • Handles theme and layout configuration
  • Merges custom providers with default configurations

Basic Usage​

import { Admin } from '@react-superadmin/core';
import { createAdmin, createResource } from '@react-superadmin/core';
const config = createAdmin({
  title: 'My Admin Panel',
  resources: [
    createResource({
  name: 'users',
  label: 'Users',
  fields: [
  { name: 'id', label: 'ID', type: 'text' },
  { name: 'name', label: 'Name', type: 'text' },
  { name: 'email', label: 'Email', type: 'email' },
  ],
    }),
  ],
  theme: { primaryColor: '#3b82f6' },
});
function App() {
  return <Admin config={config}>{/* Your admin interface components */}</Admin>;
}

Props​

| Prop | Type | Required | Default | Description | | ---------------------------------------- | ---------------------------------------------- | | config | AdminConfig | | - | Configuration object for the admin application | | layout | ComponentType<{ children: ReactNode }> | | - | Custom layout component to override default | | themeProvider | ComponentType<{ children: ReactNode }> | | - | Custom theme provider | | dataProvider | any | | - | Custom data provider | | authProvider | any | | - | Custom authentication provider | | i18nProvider | any | | - | Custom internationalization provider | | children | ReactNode | | - | Child components to render | | className | string | | - | Additional CSS classes |

Configuration​

The AdminConfig object supports:

interface AdminConfig {
  title: string; // Application title
  resources: ResourceConfig[]; // Available resources
  theme?: ThemeConfig; // Theme configuration
  layout?: LayoutConfig; // Layout configuration
  auth?: AuthConfig; // Authentication configuration
  dataProvider?: DataProvider; // Data provider
  authProvider?: any; // Auth provider
  i18nProvider?: any; // i18n provider
}

Provider Management​

The Admin component automatically merges custom providers with configuration:

<Admin
  config={config}
  dataProvider={customDataProvider}
  authProvider={customAuthProvider}
  themeProvider={CustomThemeProvider}
>
  {/* Providers are merged with config */}
</Admin>

Error Handling​

The component includes comprehensive error handling:

  • Validates required configuration
  • Checks provider compatibility
  • Provides meaningful error messages
  • Graceful fallbacks for missing providers

Examples​

Minimal Configuration​

<Admin config={minimalConfig}>
  <div>Simple admin interface</div>
</Admin>

With Custom Providers​

<Admin
  config={config}
  dataProvider={prismaDataProvider}
  authProvider={jwtAuthProvider}
  themeProvider={DarkThemeProvider}
>
  <AdminLayout>
    <Resource name='users' />
  </AdminLayout>
</Admin>

With Custom Layout​

<Admin config={config} layout={CustomLayout}>
  <CustomLayout>
    <Resource name='products' />
  </CustomLayout>
</Admin>

Best Practices​

  1. Always provide a title - Helps with accessibility and branding
  2. Use resource definitions - Define your data structure upfront
  3. Customize providers - Override defaults only when necessary
  4. Handle errors gracefully - Provide fallback UI for error states
  5. Test configurations - Ensure your config works in development