App Provider

The app provider component provides the necessary context for a Toolpad application, such as routing, navigation and theming.

Basic

Wrap the whole application with the AppProvider component to enable many of Toolpad's features.

<AppProvider navigation={NAVIGATION} router={router}>
  <DashboardLayout>
    <Box
      sx={{
        py: 4,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <Typography>Dashboard content for {pathname}</Typography>
    </Box>
  </DashboardLayout>
</AppProvider>

<AppProvider navigation={NAVIGATION} router={router}>
  <DashboardLayout>
    <Box
      sx={{
        py: 4,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <Typography>Dashboard content for {pathname}</Typography>
    </Box>
  </DashboardLayout>
</AppProvider>

Press Enter to start editing

Next.js

The AppProvider for Next.js applications includes routing out-of-the-box.

import { AppProvider } from '@toolpad/core/nextjs/AppProvider';
// or
import { AppProvider } from '@toolpad/core/nextjs';

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<AppProvider />