[docs] Add CLI install instructions to docs

docs/data/toolpad/core/introduction/examples.md

@@ -7,6 +7,26 @@ title: Examples
 
 <p class="description">Browse a collection of Toolpad Core examples to help you get started quickly.</p>
 
+## Installation
+
+You can create a new project based on any of these examples using the `create-toolpad-app` command:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npx create-toolpad-app --example "example-name"
+```
+
+```bash pnpm
+pnpm dlx create-toolpad-app --example "example-name"
+```
+
+```bash yarn
+yarn create toolpad-app --example "example-name"
+```
+
+</codeblock>
+
 ## Featured examples
 
 {{"component": "modules/components/examples/CoreFeaturedExamples.tsx"}}

docs/src/modules/components/examples/ExamplesFeatured.tsx

@@ -15,6 +15,9 @@ import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import { useTheme } from '@mui/material/styles';
 import { sxChip } from 'docs/src/modules/components/AppNavDrawerItem';
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
+import CheckRounded from '@mui/icons-material/CheckRounded';
+import copy from 'clipboard-copy';
 import { Example, versionGitHubLink } from './examplesUtils';
 
 interface FeaturedExamplesProps {
@@ -23,6 +26,13 @@ interface FeaturedExamplesProps {
 
 export default function ExamplesFeatured(props: FeaturedExamplesProps) {
   const t = useTranslate();
+  const [copiedId, setCopiedId] = React.useState<string | null>(null);
+
+  const handleCopy = React.useCallback((text: string, id: string) => {
+    copy(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  }, []);
 
   const examples = props.examples.filter((example: Example) => example.featured === true);
   const docsTheme = useTheme();
@@ -32,6 +42,9 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) {
       {examples.map((example: Example) => {
         const computedSrc =
           docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
+        const exampleName = example.source.split('/').pop();
+        const installCommand = `pnpm dlx create-toolpad-app@latest --example ${exampleName}`;
+
         return (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} key={example.title}>
             <Typography component="h3" variant="h6" sx={{ fontWeight: 'semiBold' }}>
@@ -160,6 +173,22 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) {
                     </IconButton>
                   </Tooltip>
                 </Box>
+
+                <Button
+                  size="small"
+                  variant="outlined"
+                  onClick={() => handleCopy(installCommand, example.title)}
+                  startIcon={
+                    copiedId === example.title ? (
+                      <CheckRounded fontSize="small" />
+                    ) : (
+                      <ContentCopyRounded fontSize="small" />
+                    )
+                  }
+                >
+                  {installCommand}
+                </Button>
+
                 <Button
                   component="a"
                   href={versionGitHubLink(example.href)}

docs/src/modules/components/examples/ExamplesGrid.tsx

@@ -4,14 +4,16 @@ import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { alpha, useTheme } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import Stack from '@mui/material/Stack';
 import SvgIcon from '@mui/material/SvgIcon';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
+import CheckRounded from '@mui/icons-material/CheckRounded';
+import copy from 'clipboard-copy';
 import { Example, versionGitHubLink } from './examplesUtils';
 
 interface ExamplesGridProps {
@@ -36,13 +38,22 @@ function CodeSandboxIcon() {
 
 export default function ExamplesGrid(props: ExamplesGridProps) {
   const t = useTranslate();
+  const [copiedId, setCopiedId] = React.useState<string | null>(null);
+
+  const handleCopy = (text: string, id: string) => {
+    copy(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
 
   const examples = props.examples.filter((example: Example) => example.featured !== true);
   const docsTheme = useTheme();
 
   return (
     <Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
       {examples.map((example) => {
+        const exampleName = example.source.split('/').pop();
+        const installCommand = `pnpm dlx create-toolpad-app@latest --example ${exampleName}`;
         const computedSrc =
           docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
         return (
@@ -99,45 +110,63 @@ export default function ExamplesGrid(props: ExamplesGridProps) {
                   p: 0,
                   display: 'flex',
                   alignItems: 'center',
-                  justifyContent: 'space-between',
+                  justifyContent: 'flex-start',
+                  gap: 1,
                 }}
               >
-                <Button
-                  component="a"
-                  href={versionGitHubLink(example.source)}
-                  size="small"
-                  target="_blank"
-                >
-                  {t('source')}
-                </Button>
-                <Stack direction="row" spacing={1}>
-                  {example.stackBlitz === true ? (
-                    <Tooltip title="Edit in StackBlitz">
-                      <IconButton
-                        component="a"
-                        href={`https://stackblitz.com/github/${example.source.replace('https://github.com/', '')}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        size="small"
-                      >
-                        <StackBlitzIcon />
-                      </IconButton>
-                    </Tooltip>
-                  ) : null}
-                  {example.codeSandbox === true ? (
-                    <Tooltip title="Edit in CodeSandbox">
-                      <IconButton
-                        component="a"
-                        href={`https://codesandbox.io/p/sandbox/github/${example.source.replace('https://github.com/', '')}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        size="small"
-                      >
-                        <CodeSandboxIcon />
-                      </IconButton>
-                    </Tooltip>
-                  ) : null}
-                </Stack>
+                <Tooltip title={t('source')}>
+                  <IconButton
+                    component="a"
+                    href={versionGitHubLink(example.source)}
+                    size="small"
+                    target="_blank"
+                  >
+                    <GitHubIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+
+                {example.stackBlitz === true ? (
+                  <Tooltip title="Edit in StackBlitz">
+                    <IconButton
+                      component="a"
+                      href={`https://stackblitz.com/github/${example.source.replace('https://github.com/', '')}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      size="small"
+                    >
+                      <StackBlitzIcon />
+                    </IconButton>
+                  </Tooltip>
+                ) : null}
+
+                {example.codeSandbox === true ? (
+                  <Tooltip title="Edit in CodeSandbox">
+                    <IconButton
+                      component="a"
+                      href={`https://codesandbox.io/p/sandbox/github/${example.source.replace('https://github.com/', '')}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      size="small"
+                    >
+                      <CodeSandboxIcon />
+                    </IconButton>
+                  </Tooltip>
+                ) : null}
+
+                <Tooltip title={installCommand}>
+                  <IconButton
+                    size="small"
+                    onClick={() => {
+                      handleCopy(installCommand, example.title);
+                    }}
+                  >
+                    {copiedId === example.title ? (
+                      <CheckRounded fontSize="small" />
+                    ) : (
+                      <ContentCopyRounded fontSize="small" />
+                    )}
+                  </IconButton>
+                </Tooltip>
               </CardActions>
             </Card>
           </Grid>