AppProvider API

API reference docs for the React AppProvider component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { AppProvider } from '@toolpad-core/AppProvider';
import { AppProvider } from '@toolpad-core/nextjs/AppProvider'; // Next.js
// or
import { AppProvider } from '@toolpad-core';
import { AppProvider } from '@toolpad-core/nextjs'; // Next.js

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
children*	node	-	The content of the app provider.
branding	{ logo?: node, title?: string }	null	Branding options for the app.
navigation	Array<{ children?: Array<object \| { kind: 'header', title: string } \| { kind: 'divider' }>, icon?: node, kind?: 'page', slug?: string, title?: string } \| { kind: 'header', title: string } \| { kind: 'divider' }>	[]	Navigation definition for the app.
router	{ navigate: func, pathname: string, searchParams?: URLSearchParams }	null	Router implementation used inside Toolpad components.
theme	object	extendTheme()	Theme or themes to be used by the app in light/dark mode. A CSS variables theme is recommended.
window	object	window	The window where the application is rendered. This is needed when rendering the app inside an iframe, for example.

The component cannot hold a ref.