diff --git a/examples/datagrid-premium/.gitignore b/examples/datagrid-premium/.gitignore
new file mode 100644
index 00000000000..a56149af866
--- /dev/null
+++ b/examples/datagrid-premium/.gitignore
@@ -0,0 +1,129 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
diff --git a/examples/datagrid-premium/README.md b/examples/datagrid-premium/README.md
new file mode 100644
index 00000000000..d155e4e9285
--- /dev/null
+++ b/examples/datagrid-premium/README.md
@@ -0,0 +1,29 @@
+# datagrid-premium in Toolpad Studio
+
+A Toolpad Studio app that shows how to use use the MUI X premium grid in a custom component.
+
+## How to run
+
+Use `create-toolpad-app` to bootstrap the example:
+
+```bash
+npx create-toolpad-app@latest --example datagrid-premium
+```
+
+```bash
+yarn create toolpad-app --example datagrid-premium
+```
+
+```bash
+pnpm create toolpad-app --example datagrid-premium
+```
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad Studio:
+
+1. Using the MUI x premium DataGrid in a custom component.
+
+## The source
+
+[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/datagrid-premium)
diff --git a/examples/datagrid-premium/application.yml b/examples/datagrid-premium/application.yml
new file mode 100644
index 00000000000..6b008228134
--- /dev/null
+++ b/examples/datagrid-premium/application.yml
@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}
diff --git a/examples/datagrid-premium/components/CustomDataGrid.tsx b/examples/datagrid-premium/components/CustomDataGrid.tsx
new file mode 100644
index 00000000000..3c78c89e3f6
--- /dev/null
+++ b/examples/datagrid-premium/components/CustomDataGrid.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@toolpad/studio/browser';
+import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
+import { LicenseInfo } from '@mui/x-license';
+
+LicenseInfo.setLicenseKey('LICENSE_KEY');
+
+export interface CustomDataGridProps {
+ rows: any[];
+}
+
+const columns: GridColDef[] = [
+ {
+ field: 'name',
+ groupable: true,
+ },
+ { field: 'age' },
+];
+
+function CustomDataGrid({ rows }: CustomDataGridProps) {
+ return (
+
+
+
+ );
+}
+
+export default createComponent(CustomDataGrid, {
+ argTypes: {
+ rows: { type: 'array', defaultValue: [] },
+ },
+});
diff --git a/examples/datagrid-premium/components/tsconfig.json b/examples/datagrid-premium/components/tsconfig.json
new file mode 100644
index 00000000000..beb8db0d4d3
--- /dev/null
+++ b/examples/datagrid-premium/components/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "jsx": "preserve",
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "lib": ["ESNext", "DOM"]
+ },
+ "include": ["*.tsx"]
+}
diff --git a/examples/datagrid-premium/package.json b/examples/datagrid-premium/package.json
new file mode 100644
index 00000000000..a3e1f86139d
--- /dev/null
+++ b/examples/datagrid-premium/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "datagrid-premium",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "toolpad-studio dev .",
+ "build": "toolpad-studio build .",
+ "start": "toolpad-studio start ."
+ },
+ "dependencies": {
+ "@mui/x-data-grid-premium": "^7.0.0",
+ "@mui/x-license": "^7.1.1",
+ "@toolpad/studio": "0.1.53"
+ }
+}
diff --git a/examples/datagrid-premium/pages/page/page.yml b/examples/datagrid-premium/pages/page/page.yml
new file mode 100644
index 00000000000..e0b3981eb5f
--- /dev/null
+++ b/examples/datagrid-premium/pages/page/page.yml
@@ -0,0 +1,22 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.53/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+ title: Default page
+ alias:
+ - L7RS8Ol
+ content:
+ - component: codeComponent.CustomDataGrid
+ name: customDataGrid
+ props:
+ rows:
+ - id: 1
+ name: John
+ age: 31
+ - id: 2
+ name: Jane
+ age: 36
+ - id: 3
+ name: John
+ age: 40