└── mui-starter
    ├── .eslintrc.json
    ├── next.config.mjs
    ├── src
        ├── app
        │   ├── favicon.ico
        │   ├── hello-world
        │   │   └── page.tsx
        │   ├── layout.tsx
        │   ├── globals.css
        │   ├── page.tsx
        │   └── page.module.css
        ├── theme.ts
        └── mui-components.tsx
    ├── .gitignore
    ├── public
        ├── vercel.svg
        └── next.svg
    ├── tsconfig.json
    ├── package.json
    └── README.md


/mui-starter/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/mui-starter/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/mui-starter/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BuilderIO/vcp-design-systems-examples/main/mui-starter/src/app/favicon.ico


--------------------------------------------------------------------------------
/mui-starter/src/app/hello-world/page.tsx:
--------------------------------------------------------------------------------
1 | import { Typography } from "@/mui-components";
2 | 
3 | export default function HelloWorldPage() {
4 |   return <Typography variant="h1">Hello world!</Typography>;
5 | }
6 | 


--------------------------------------------------------------------------------
/mui-starter/src/theme.ts:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Roboto } from "next/font/google";
 3 | import { createTheme } from "@mui/material/styles";
 4 | 
 5 | const roboto = Roboto({
 6 |   weight: ["300", "400", "500", "700"],
 7 |   subsets: ["latin"],
 8 |   display: "swap",
 9 | });
10 | 
11 | const theme = createTheme({
12 |   typography: {
13 |     fontFamily: roboto.style.fontFamily,
14 |   },
15 | });
16 | 
17 | export default theme;
18 | 


--------------------------------------------------------------------------------
/mui-starter/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/mui-starter/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/mui-starter/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/mui-starter/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | 
 3 | import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
 4 | import { ThemeProvider } from "@mui/material/styles";
 5 | import theme from "@/theme";
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "Visual Copilot MUI Starter",
 9 |   description: "Materal UI - Figma to Code",
10 | };
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: Readonly<{
15 |   children: React.ReactNode;
16 | }>) {
17 |   return (
18 |     <html lang="en">
19 |       <body>
20 |         <AppRouterCacheProvider>
21 |           <ThemeProvider theme={theme}>{children}</ThemeProvider>
22 |         </AppRouterCacheProvider>
23 |       </body>
24 |     </html>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/mui-starter/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mui-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@emotion/cache": "^11.11.0",
13 |     "@emotion/react": "^11.11.4",
14 |     "@emotion/styled": "^11.11.0",
15 |     "@mui/material": "^5.15.14",
16 |     "@mui/material-nextjs": "^5.15.11",
17 |     "next": "14.1.4",
18 |     "react": "^18",
19 |     "react-dom": "^18"
20 |   },
21 |   "devDependencies": {
22 |     "@types/node": "^20",
23 |     "@types/react": "^18",
24 |     "@types/react-dom": "^18",
25 |     "eslint": "^8",
26 |     "eslint-config-next": "14.1.4",
27 |     "typescript": "^5"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/mui-starter/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/mui-starter/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/mui-starter/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --max-width: 1100px;
  3 |   --border-radius: 12px;
  4 |   --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
  5 |     "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
  6 |     "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  7 | 
  8 |   --foreground-rgb: 0, 0, 0;
  9 |   --background-start-rgb: 214, 219, 220;
 10 |   --background-end-rgb: 255, 255, 255;
 11 | 
 12 |   --primary-glow: conic-gradient(
 13 |     from 180deg at 50% 50%,
 14 |     #16abff33 0deg,
 15 |     #0885ff33 55deg,
 16 |     #54d6ff33 120deg,
 17 |     #0071ff33 160deg,
 18 |     transparent 360deg
 19 |   );
 20 |   --secondary-glow: radial-gradient(
 21 |     rgba(255, 255, 255, 1),
 22 |     rgba(255, 255, 255, 0)
 23 |   );
 24 | 
 25 |   --tile-start-rgb: 239, 245, 249;
 26 |   --tile-end-rgb: 228, 232, 233;
 27 |   --tile-border: conic-gradient(
 28 |     #00000080,
 29 |     #00000040,
 30 |     #00000030,
 31 |     #00000020,
 32 |     #00000010,
 33 |     #00000010,
 34 |     #00000080
 35 |   );
 36 | 
 37 |   --callout-rgb: 238, 240, 241;
 38 |   --callout-border-rgb: 172, 175, 176;
 39 |   --card-rgb: 180, 185, 188;
 40 |   --card-border-rgb: 131, 134, 135;
 41 | }
 42 | 
 43 | @media (prefers-color-scheme: dark) {
 44 |   :root {
 45 |     --foreground-rgb: 255, 255, 255;
 46 |     --background-start-rgb: 0, 0, 0;
 47 |     --background-end-rgb: 0, 0, 0;
 48 | 
 49 |     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
 50 |     --secondary-glow: linear-gradient(
 51 |       to bottom right,
 52 |       rgba(1, 65, 255, 0),
 53 |       rgba(1, 65, 255, 0),
 54 |       rgba(1, 65, 255, 0.3)
 55 |     );
 56 | 
 57 |     --tile-start-rgb: 2, 13, 46;
 58 |     --tile-end-rgb: 2, 5, 19;
 59 |     --tile-border: conic-gradient(
 60 |       #ffffff80,
 61 |       #ffffff40,
 62 |       #ffffff30,
 63 |       #ffffff20,
 64 |       #ffffff10,
 65 |       #ffffff10,
 66 |       #ffffff80
 67 |     );
 68 | 
 69 |     --callout-rgb: 20, 20, 20;
 70 |     --callout-border-rgb: 108, 108, 108;
 71 |     --card-rgb: 100, 100, 100;
 72 |     --card-border-rgb: 200, 200, 200;
 73 |   }
 74 | }
 75 | 
 76 | * {
 77 |   box-sizing: border-box;
 78 |   padding: 0;
 79 |   margin: 0;
 80 | }
 81 | 
 82 | html,
 83 | body {
 84 |   max-width: 100vw;
 85 |   overflow-x: hidden;
 86 | }
 87 | 
 88 | body {
 89 |   color: rgb(var(--foreground-rgb));
 90 |   background: linear-gradient(
 91 |       to bottom,
 92 |       transparent,
 93 |       rgb(var(--background-end-rgb))
 94 |     )
 95 |     rgb(var(--background-start-rgb));
 96 | }
 97 | 
 98 | a {
 99 |   color: inherit;
100 |   text-decoration: none;
101 | }
102 | 
103 | @media (prefers-color-scheme: dark) {
104 |   html {
105 |     color-scheme: dark;
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/mui-starter/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import styles from "./page.module.css";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <main className={styles.main}>
 7 |       <div className={styles.description}>
 8 |         <p>
 9 |           Get started by editing&nbsp;
10 |           <code className={styles.code}>src/app/page.tsx</code>
11 |         </p>
12 |         <div>
13 |           <a
14 |             href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15 |             target="_blank"
16 |             rel="noopener noreferrer"
17 |           >
18 |             By{" "}
19 |             <Image
20 |               src="/vercel.svg"
21 |               alt="Vercel Logo"
22 |               className={styles.vercelLogo}
23 |               width={100}
24 |               height={24}
25 |               priority
26 |             />
27 |           </a>
28 |         </div>
29 |       </div>
30 | 
31 |       <div className={styles.center}>
32 |         <Image
33 |           className={styles.logo}
34 |           src="/next.svg"
35 |           alt="Next.js Logo"
36 |           width={180}
37 |           height={37}
38 |           priority
39 |         />
40 |       </div>
41 | 
42 |       <div className={styles.grid}>
43 |         <a
44 |           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45 |           className={styles.card}
46 |           target="_blank"
47 |           rel="noopener noreferrer"
48 |         >
49 |           <h2>
50 |             Docs <span>-&gt;</span>
51 |           </h2>
52 |           <p>Find in-depth information about Next.js features and API.</p>
53 |         </a>
54 | 
55 |         <a
56 |           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57 |           className={styles.card}
58 |           target="_blank"
59 |           rel="noopener noreferrer"
60 |         >
61 |           <h2>
62 |             Learn <span>-&gt;</span>
63 |           </h2>
64 |           <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65 |         </a>
66 | 
67 |         <a
68 |           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69 |           className={styles.card}
70 |           target="_blank"
71 |           rel="noopener noreferrer"
72 |         >
73 |           <h2>
74 |             Templates <span>-&gt;</span>
75 |           </h2>
76 |           <p>Explore starter templates for Next.js.</p>
77 |         </a>
78 | 
79 |         <a
80 |           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81 |           className={styles.card}
82 |           target="_blank"
83 |           rel="noopener noreferrer"
84 |         >
85 |           <h2>
86 |             Deploy <span>-&gt;</span>
87 |           </h2>
88 |           <p>
89 |             Instantly deploy your Next.js site to a shareable URL with Vercel.
90 |           </p>
91 |         </a>
92 |       </div>
93 |     </main>
94 |   );
95 | }
96 | 


--------------------------------------------------------------------------------
/mui-starter/src/app/page.module.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   justify-content: space-between;
  5 |   align-items: center;
  6 |   padding: 6rem;
  7 |   min-height: 100vh;
  8 | }
  9 | 
 10 | .description {
 11 |   display: inherit;
 12 |   justify-content: inherit;
 13 |   align-items: inherit;
 14 |   font-size: 0.85rem;
 15 |   max-width: var(--max-width);
 16 |   width: 100%;
 17 |   z-index: 2;
 18 |   font-family: var(--font-mono);
 19 | }
 20 | 
 21 | .description a {
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 |   gap: 0.5rem;
 26 | }
 27 | 
 28 | .description p {
 29 |   position: relative;
 30 |   margin: 0;
 31 |   padding: 1rem;
 32 |   background-color: rgba(var(--callout-rgb), 0.5);
 33 |   border: 1px solid rgba(var(--callout-border-rgb), 0.3);
 34 |   border-radius: var(--border-radius);
 35 | }
 36 | 
 37 | .code {
 38 |   font-weight: 700;
 39 |   font-family: var(--font-mono);
 40 | }
 41 | 
 42 | .grid {
 43 |   display: grid;
 44 |   grid-template-columns: repeat(4, minmax(25%, auto));
 45 |   max-width: 100%;
 46 |   width: var(--max-width);
 47 | }
 48 | 
 49 | .card {
 50 |   padding: 1rem 1.2rem;
 51 |   border-radius: var(--border-radius);
 52 |   background: rgba(var(--card-rgb), 0);
 53 |   border: 1px solid rgba(var(--card-border-rgb), 0);
 54 |   transition: background 200ms, border 200ms;
 55 | }
 56 | 
 57 | .card span {
 58 |   display: inline-block;
 59 |   transition: transform 200ms;
 60 | }
 61 | 
 62 | .card h2 {
 63 |   font-weight: 600;
 64 |   margin-bottom: 0.7rem;
 65 | }
 66 | 
 67 | .card p {
 68 |   margin: 0;
 69 |   opacity: 0.6;
 70 |   font-size: 0.9rem;
 71 |   line-height: 1.5;
 72 |   max-width: 30ch;
 73 |   text-wrap: balance;
 74 | }
 75 | 
 76 | .center {
 77 |   display: flex;
 78 |   justify-content: center;
 79 |   align-items: center;
 80 |   position: relative;
 81 |   padding: 4rem 0;
 82 | }
 83 | 
 84 | .center::before {
 85 |   background: var(--secondary-glow);
 86 |   border-radius: 50%;
 87 |   width: 480px;
 88 |   height: 360px;
 89 |   margin-left: -400px;
 90 | }
 91 | 
 92 | .center::after {
 93 |   background: var(--primary-glow);
 94 |   width: 240px;
 95 |   height: 180px;
 96 |   z-index: -1;
 97 | }
 98 | 
 99 | .center::before,
100 | .center::after {
101 |   content: "";
102 |   left: 50%;
103 |   position: absolute;
104 |   filter: blur(45px);
105 |   transform: translateZ(0);
106 | }
107 | 
108 | .logo {
109 |   position: relative;
110 | }
111 | /* Enable hover only on non-touch devices */
112 | @media (hover: hover) and (pointer: fine) {
113 |   .card:hover {
114 |     background: rgba(var(--card-rgb), 0.1);
115 |     border: 1px solid rgba(var(--card-border-rgb), 0.15);
116 |   }
117 | 
118 |   .card:hover span {
119 |     transform: translateX(4px);
120 |   }
121 | }
122 | 
123 | @media (prefers-reduced-motion) {
124 |   .card:hover span {
125 |     transform: none;
126 |   }
127 | }
128 | 
129 | /* Mobile */
130 | @media (max-width: 700px) {
131 |   .content {
132 |     padding: 4rem;
133 |   }
134 | 
135 |   .grid {
136 |     grid-template-columns: 1fr;
137 |     margin-bottom: 120px;
138 |     max-width: 320px;
139 |     text-align: center;
140 |   }
141 | 
142 |   .card {
143 |     padding: 1rem 2.5rem;
144 |   }
145 | 
146 |   .card h2 {
147 |     margin-bottom: 0.5rem;
148 |   }
149 | 
150 |   .center {
151 |     padding: 8rem 0 6rem;
152 |   }
153 | 
154 |   .center::before {
155 |     transform: none;
156 |     height: 300px;
157 |   }
158 | 
159 |   .description {
160 |     font-size: 0.8rem;
161 |   }
162 | 
163 |   .description a {
164 |     padding: 1rem;
165 |   }
166 | 
167 |   .description p,
168 |   .description div {
169 |     display: flex;
170 |     justify-content: center;
171 |     position: fixed;
172 |     width: 100%;
173 |   }
174 | 
175 |   .description p {
176 |     align-items: center;
177 |     inset: 0 0 auto;
178 |     padding: 2rem 1rem 1.4rem;
179 |     border-radius: 0;
180 |     border: none;
181 |     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
182 |     background: linear-gradient(
183 |       to bottom,
184 |       rgba(var(--background-start-rgb), 1),
185 |       rgba(var(--callout-rgb), 0.5)
186 |     );
187 |     background-clip: padding-box;
188 |     backdrop-filter: blur(24px);
189 |   }
190 | 
191 |   .description div {
192 |     align-items: flex-end;
193 |     pointer-events: none;
194 |     inset: auto 0 0;
195 |     padding: 2rem;
196 |     height: 200px;
197 |     background: linear-gradient(
198 |       to bottom,
199 |       transparent 0%,
200 |       rgb(var(--background-end-rgb)) 40%
201 |     );
202 |     z-index: 1;
203 |   }
204 | }
205 | 
206 | /* Tablet and Smaller Desktop */
207 | @media (min-width: 701px) and (max-width: 1120px) {
208 |   .grid {
209 |     grid-template-columns: repeat(2, 50%);
210 |   }
211 | }
212 | 
213 | @media (prefers-color-scheme: dark) {
214 |   .vercelLogo {
215 |     filter: invert(1);
216 |   }
217 | 
218 |   .logo {
219 |     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
220 |   }
221 | }
222 | 
223 | @keyframes rotate {
224 |   from {
225 |     transform: rotate(360deg);
226 |   }
227 |   to {
228 |     transform: rotate(0deg);
229 |   }
230 | }
231 | 


--------------------------------------------------------------------------------
/mui-starter/src/mui-components.tsx:
--------------------------------------------------------------------------------
  1 | import MUIAccordion, { AccordionProps } from "@mui/material/Accordion";
  2 | import MUIAccordionActions, {
  3 |   AccordionActionsProps,
  4 | } from "@mui/material/AccordionActions";
  5 | import MUIAccordionDetails, {
  6 |   AccordionDetailsProps,
  7 | } from "@mui/material/AccordionDetails";
  8 | import MUIAccordionSummary, {
  9 |   AccordionSummaryProps,
 10 | } from "@mui/material/AccordionSummary";
 11 | import MUIAlert, { AlertProps } from "@mui/material/Alert";
 12 | import MUIAlertTitle, { AlertTitleProps } from "@mui/material/AlertTitle";
 13 | import MUIAppBar, { AppBarProps } from "@mui/material/AppBar";
 14 | import MUIAvatar, { AvatarProps } from "@mui/material/Avatar";
 15 | import MUIAvatarGroup, { AvatarGroupProps } from "@mui/material/AvatarGroup";
 16 | import MUIBackdrop, { BackdropProps } from "@mui/material/Backdrop";
 17 | import MUIBadge, { BadgeProps } from "@mui/material/Badge";
 18 | import MUIBottomNavigation, {
 19 |   BottomNavigationProps,
 20 | } from "@mui/material/BottomNavigation";
 21 | import MUIBottomNavigationAction, {
 22 |   BottomNavigationActionProps,
 23 | } from "@mui/material/BottomNavigationAction";
 24 | import MUIBox, { BoxProps } from "@mui/material/Box";
 25 | import MUIBreadcrumbs, { BreadcrumbsProps } from "@mui/material/Breadcrumbs";
 26 | import MUIButton, { ButtonProps } from "@mui/material/Button";
 27 | import MUICard, { CardProps } from "@mui/material/Card";
 28 | import MUICardActionArea, {
 29 |   CardActionAreaProps,
 30 | } from "@mui/material/CardActionArea";
 31 | import MUICardActions, { CardActionsProps } from "@mui/material/CardActions";
 32 | import MUICardContent, { CardContentProps } from "@mui/material/CardContent";
 33 | import MUICardHeader, { CardHeaderProps } from "@mui/material/CardHeader";
 34 | import MUICardMedia, { CardMediaProps } from "@mui/material/CardMedia";
 35 | import MUICheckbox, { CheckboxProps } from "@mui/material/Checkbox";
 36 | import MUIChip, { ChipProps } from "@mui/material/Chip";
 37 | import MUICircularProgress, {
 38 |   CircularProgressProps,
 39 | } from "@mui/material/CircularProgress";
 40 | import MUIClickAwayListener, {
 41 |   ClickAwayListenerProps,
 42 | } from "@mui/material/ClickAwayListener";
 43 | import MUICollapse, { CollapseProps } from "@mui/material/Collapse";
 44 | import MUIContainer, { ContainerProps } from "@mui/material/Container";
 45 | import MUIDialog, { DialogProps } from "@mui/material/Dialog";
 46 | import MUIDialogActions, {
 47 |   DialogActionsProps,
 48 | } from "@mui/material/DialogActions";
 49 | import MUIDialogContent, {
 50 |   DialogContentProps,
 51 | } from "@mui/material/DialogContent";
 52 | import MUIDialogContentText, {
 53 |   DialogContentTextProps,
 54 | } from "@mui/material/DialogContentText";
 55 | import MUIDialogTitle, { DialogTitleProps } from "@mui/material/DialogTitle";
 56 | import MUIDivider, { DividerProps } from "@mui/material/Divider";
 57 | import MUIDrawer, { DrawerProps } from "@mui/material/Drawer";
 58 | import MUIFab, { FabProps } from "@mui/material/Fab";
 59 | import MUIFade, { FadeProps } from "@mui/material/Fade";
 60 | import MUIFilledInput, { FilledInputProps } from "@mui/material/FilledInput";
 61 | import MUIFormControl, { FormControlProps } from "@mui/material/FormControl";
 62 | import MUIFormControlLabel, {
 63 |   FormControlLabelProps,
 64 | } from "@mui/material/FormControlLabel";
 65 | import MUIFormGroup, { FormGroupProps } from "@mui/material/FormGroup";
 66 | import MUIFormHelperText, {
 67 |   FormHelperTextProps,
 68 | } from "@mui/material/FormHelperText";
 69 | import MUIFormLabel, { FormLabelProps } from "@mui/material/FormLabel";
 70 | import MUIGrid, { GridProps } from "@mui/material/Grid";
 71 | import MUIImageList, { ImageListProps } from "@mui/material/ImageList";
 72 | import MUIImageListItem, {
 73 |   ImageListItemProps,
 74 | } from "@mui/material/ImageListItem";
 75 | import MUIImageListItemBar, {
 76 |   ImageListItemBarProps,
 77 | } from "@mui/material/ImageListItemBar";
 78 | import MUIInput, { InputProps } from "@mui/material/Input";
 79 | import MUIInputAdornment, {
 80 |   InputAdornmentProps,
 81 | } from "@mui/material/InputAdornment";
 82 | import MUIInputLabel, { InputLabelProps } from "@mui/material/InputLabel";
 83 | import MUILinearProgress, {
 84 |   LinearProgressProps,
 85 | } from "@mui/material/LinearProgress";
 86 | import MUILink, { LinkProps } from "@mui/material/Link";
 87 | import MUIList, { ListProps } from "@mui/material/List";
 88 | import MUIListItem, { ListItemProps } from "@mui/material/ListItem";
 89 | import MUIListItemAvatar, {
 90 |   ListItemAvatarProps,
 91 | } from "@mui/material/ListItemAvatar";
 92 | import MUIListItemButton, {
 93 |   ListItemButtonProps,
 94 | } from "@mui/material/ListItemButton";
 95 | import MUIListItemIcon, { ListItemIconProps } from "@mui/material/ListItemIcon";
 96 | import MUIListItemSecondaryAction, {
 97 |   ListItemSecondaryActionProps,
 98 | } from "@mui/material/ListItemSecondaryAction";
 99 | import MUIListItemText, { ListItemTextProps } from "@mui/material/ListItemText";
100 | import MUIListSubheader, {
101 |   ListSubheaderProps,
102 | } from "@mui/material/ListSubheader";
103 | import MUIMenu, { MenuProps } from "@mui/material/Menu";
104 | import MUIMenuItem, { MenuItemProps } from "@mui/material/MenuItem";
105 | import MUIMenuList, { MenuListProps } from "@mui/material/MenuList";
106 | import MUIModal, { ModalProps } from "@mui/material/Modal";
107 | import MUIOutlinedInput, {
108 |   OutlinedInputProps,
109 | } from "@mui/material/OutlinedInput";
110 | import MUIPagination, { PaginationProps } from "@mui/material/Pagination";
111 | import MUIPaginationItem, {
112 |   PaginationItemProps,
113 | } from "@mui/material/PaginationItem";
114 | import MUIPaper, { PaperProps } from "@mui/material/Paper";
115 | import MUIPopover, { PopoverProps } from "@mui/material/Popover";
116 | import MUIPopper, { PopperProps } from "@mui/material/Popper";
117 | import MUIPortal, { PortalProps } from "@mui/material/Portal";
118 | import MUIRadio, { RadioProps } from "@mui/material/Radio";
119 | import MUIRadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
120 | import MUIRating, { RatingProps } from "@mui/material/Rating";
121 | import MUISelect, { SelectProps } from "@mui/material/Select";
122 | import MUISkeleton, { SkeletonProps } from "@mui/material/Skeleton";
123 | import MUISlide, { SlideProps } from "@mui/material/Slide";
124 | import MUISlider, { SliderProps } from "@mui/material/Slider";
125 | import MUISnackbar, { SnackbarProps } from "@mui/material/Snackbar";
126 | import MUISnackbarContent, {
127 |   SnackbarContentProps,
128 | } from "@mui/material/SnackbarContent";
129 | import MUISpeedDial, { SpeedDialProps } from "@mui/material/SpeedDial";
130 | import MUISpeedDialAction, {
131 |   SpeedDialActionProps,
132 | } from "@mui/material/SpeedDialAction";
133 | import MUISpeedDialIcon, {
134 |   SpeedDialIconProps,
135 | } from "@mui/material/SpeedDialIcon";
136 | import MUIStack, { StackProps } from "@mui/material/Stack";
137 | import MUIStep, { StepProps } from "@mui/material/Step";
138 | import MUIStepButton, { StepButtonProps } from "@mui/material/StepButton";
139 | import MUIStepConnector, {
140 |   StepConnectorProps,
141 | } from "@mui/material/StepConnector";
142 | import MUIStepContent, { StepContentProps } from "@mui/material/StepContent";
143 | import MUIStepIcon, { StepIconProps } from "@mui/material/StepIcon";
144 | import MUIStepLabel, { StepLabelProps } from "@mui/material/StepLabel";
145 | import MUIStepper, { StepperProps } from "@mui/material/Stepper";
146 | import MUISwipeableDrawer, {
147 |   SwipeableDrawerProps,
148 | } from "@mui/material/SwipeableDrawer";
149 | import MUISwitch, { SwitchProps } from "@mui/material/Switch";
150 | import MUITab, { TabProps } from "@mui/material/Tab";
151 | import MUITabScrollButton, {
152 |   TabScrollButtonProps,
153 | } from "@mui/material/TabScrollButton";
154 | import MUITable, { TableProps } from "@mui/material/Table";
155 | import MUITableBody, { TableBodyProps } from "@mui/material/TableBody";
156 | import MUITableCell, { TableCellProps } from "@mui/material/TableCell";
157 | import MUITableContainer, {
158 |   TableContainerProps,
159 | } from "@mui/material/TableContainer";
160 | import MUITableFooter, { TableFooterProps } from "@mui/material/TableFooter";
161 | import MUITableHead, { TableHeadProps } from "@mui/material/TableHead";
162 | import MUITablePagination, {
163 |   TablePaginationProps,
164 | } from "@mui/material/TablePagination";
165 | import MUITableRow, { TableRowProps } from "@mui/material/TableRow";
166 | import MUITableSortLabel, {
167 |   TableSortLabelProps,
168 | } from "@mui/material/TableSortLabel";
169 | import MUITabs, { TabsProps } from "@mui/material/Tabs";
170 | import MUITextField, { TextFieldProps } from "@mui/material/TextField";
171 | import MUITextareaAutosize, {
172 |   TextareaAutosizeProps,
173 | } from "@mui/material/TextareaAutosize";
174 | import MUIToggleButton, { ToggleButtonProps } from "@mui/material/ToggleButton";
175 | import MUIToggleButtonGroup, {
176 |   ToggleButtonGroupProps,
177 | } from "@mui/material/ToggleButtonGroup";
178 | import MUIToolbar, { ToolbarProps } from "@mui/material/Toolbar";
179 | import MUITooltip, { TooltipProps } from "@mui/material/Tooltip";
180 | import MUITypography, { TypographyProps } from "@mui/material/Typography";
181 | import MUIZoom, { ZoomProps } from "@mui/material/Zoom";
182 | 
183 | export const Accordion = (props: AccordionProps) => <MUIAccordion {...props} />;
184 | export const AccordionActions = (props: AccordionActionsProps) => (
185 |   <MUIAccordionActions {...props} />
186 | );
187 | export const AccordionDetails = (props: AccordionDetailsProps) => (
188 |   <MUIAccordionDetails {...props} />
189 | );
190 | export const AccordionSummary = (props: AccordionSummaryProps) => (
191 |   <MUIAccordionSummary {...props} />
192 | );
193 | export const Alert = (props: AlertProps) => <MUIAlert {...props} />;
194 | export const AlertTitle = (props: AlertTitleProps) => (
195 |   <MUIAlertTitle {...props} />
196 | );
197 | export const AppBar = (props: AppBarProps) => <MUIAppBar {...props} />;
198 | export const Avatar = (props: AvatarProps) => <MUIAvatar {...props} />;
199 | export const AvatarGroup = (props: AvatarGroupProps) => (
200 |   <MUIAvatarGroup {...props} />
201 | );
202 | export const Backdrop = (props: BackdropProps) => <MUIBackdrop {...props} />;
203 | export const Badge = (props: BadgeProps) => <MUIBadge {...props} />;
204 | export const BottomNavigation = (props: BottomNavigationProps) => (
205 |   <MUIBottomNavigation {...props} />
206 | );
207 | export const BottomNavigationAction = (props: BottomNavigationActionProps) => (
208 |   <MUIBottomNavigationAction {...props} />
209 | );
210 | export const Box = (props: BoxProps) => <MUIBox {...props} />;
211 | export const Breadcrumbs = (props: BreadcrumbsProps) => (
212 |   <MUIBreadcrumbs {...props} />
213 | );
214 | export const Button = (props: ButtonProps) => <MUIButton {...props} />;
215 | export const Card = (props: CardProps) => <MUICard {...props} />;
216 | export const CardActionArea = (props: CardActionAreaProps) => (
217 |   <MUICardActionArea {...props} />
218 | );
219 | export const CardActions = (props: CardActionsProps) => (
220 |   <MUICardActions {...props} />
221 | );
222 | export const CardContent = (props: CardContentProps) => (
223 |   <MUICardContent {...props} />
224 | );
225 | export const CardHeader = (props: CardHeaderProps) => (
226 |   <MUICardHeader {...props} />
227 | );
228 | export const CardMedia = (props: CardMediaProps) => <MUICardMedia {...props} />;
229 | export const Checkbox = (props: CheckboxProps) => <MUICheckbox {...props} />;
230 | export const Chip = (props: ChipProps) => <MUIChip {...props} />;
231 | export const CircularProgress = (props: CircularProgressProps) => (
232 |   <MUICircularProgress {...props} />
233 | );
234 | export const ClickAwayListener = (props: ClickAwayListenerProps) => (
235 |   <MUIClickAwayListener {...props} />
236 | );
237 | export const Collapse = (props: CollapseProps) => <MUICollapse {...props} />;
238 | export const Container = (props: ContainerProps) => <MUIContainer {...props} />;
239 | export const Dialog = (props: DialogProps) => <MUIDialog {...props} />;
240 | export const DialogActions = (props: DialogActionsProps) => (
241 |   <MUIDialogActions {...props} />
242 | );
243 | export const DialogContent = (props: DialogContentProps) => (
244 |   <MUIDialogContent {...props} />
245 | );
246 | export const DialogContentText = (props: DialogContentTextProps) => (
247 |   <MUIDialogContentText {...props} />
248 | );
249 | export const DialogTitle = (props: DialogTitleProps) => (
250 |   <MUIDialogTitle {...props} />
251 | );
252 | export const Divider = (props: DividerProps) => <MUIDivider {...props} />;
253 | export const Drawer = (props: DrawerProps) => <MUIDrawer {...props} />;
254 | export const Fab = (props: FabProps) => <MUIFab {...props} />;
255 | export const Fade = (props: FadeProps) => <MUIFade {...props} />;
256 | export const FilledInput = (props: FilledInputProps) => (
257 |   <MUIFilledInput {...props} />
258 | );
259 | export const FormControl = (props: FormControlProps) => (
260 |   <MUIFormControl {...props} />
261 | );
262 | export const FormControlLabel = (props: FormControlLabelProps) => (
263 |   <MUIFormControlLabel {...props} />
264 | );
265 | export const FormGroup = (props: FormGroupProps) => <MUIFormGroup {...props} />;
266 | export const FormHelperText = (props: FormHelperTextProps) => (
267 |   <MUIFormHelperText {...props} />
268 | );
269 | export const FormLabel = (props: FormLabelProps) => <MUIFormLabel {...props} />;
270 | export const Grid = (props: GridProps) => <MUIGrid {...props} />;
271 | export const ImageList = (props: ImageListProps) => <MUIImageList {...props} />;
272 | export const ImageListItem = (props: ImageListItemProps) => (
273 |   <MUIImageListItem {...props} />
274 | );
275 | export const ImageListItemBar = (props: ImageListItemBarProps) => (
276 |   <MUIImageListItemBar {...props} />
277 | );
278 | export const Input = (props: InputProps) => <MUIInput {...props} />;
279 | export const InputAdornment = (props: InputAdornmentProps) => (
280 |   <MUIInputAdornment {...props} />
281 | );
282 | export const InputLabel = (props: InputLabelProps) => (
283 |   <MUIInputLabel {...props} />
284 | );
285 | export const LinearProgress = (props: LinearProgressProps) => (
286 |   <MUILinearProgress {...props} />
287 | );
288 | export const Link = (props: LinkProps) => <MUILink {...props} />;
289 | export const List = (props: ListProps) => <MUIList {...props} />;
290 | export const ListItem = (props: ListItemProps) => <MUIListItem {...props} />;
291 | export const ListItemAvatar = (props: ListItemAvatarProps) => (
292 |   <MUIListItemAvatar {...props} />
293 | );
294 | export const ListItemButton = (props: ListItemButtonProps) => (
295 |   <MUIListItemButton {...props} />
296 | );
297 | export const ListItemIcon = (props: ListItemIconProps) => (
298 |   <MUIListItemIcon {...props} />
299 | );
300 | export const ListItemSecondaryAction = (
301 |   props: ListItemSecondaryActionProps
302 | ) => <MUIListItemSecondaryAction {...props} />;
303 | export const ListItemText = (props: ListItemTextProps) => (
304 |   <MUIListItemText {...props} />
305 | );
306 | export const ListSubheader = (props: ListSubheaderProps) => (
307 |   <MUIListSubheader {...props} />
308 | );
309 | export const Menu = (props: MenuProps) => <MUIMenu {...props} />;
310 | export const MenuItem = (props: MenuItemProps) => <MUIMenuItem {...props} />;
311 | export const MenuList = (props: MenuListProps) => <MUIMenuList {...props} />;
312 | export const Modal = (props: ModalProps) => <MUIModal {...props} />;
313 | export const OutlinedInput = (props: OutlinedInputProps) => (
314 |   <MUIOutlinedInput {...props} />
315 | );
316 | export const Pagination = (props: PaginationProps) => (
317 |   <MUIPagination {...props} />
318 | );
319 | export const PaginationItem = (props: PaginationItemProps) => (
320 |   <MUIPaginationItem {...props} />
321 | );
322 | export const Paper = (props: PaperProps) => <MUIPaper {...props} />;
323 | export const Popover = (props: PopoverProps) => <MUIPopover {...props} />;
324 | export const Popper = (props: PopperProps) => <MUIPopper {...props} />;
325 | export const Portal = (props: PortalProps) => <MUIPortal {...props} />;
326 | export const Radio = (props: RadioProps) => <MUIRadio {...props} />;
327 | export const RadioGroup = (props: RadioGroupProps) => (
328 |   <MUIRadioGroup {...props} />
329 | );
330 | export const Rating = (props: RatingProps) => <MUIRating {...props} />;
331 | export const Select = (props: SelectProps) => <MUISelect {...props} />;
332 | export const Skeleton = (props: SkeletonProps) => <MUISkeleton {...props} />;
333 | export const Slide = (props: SlideProps) => <MUISlide {...props} />;
334 | export const Slider = (props: SliderProps) => <MUISlider {...props} />;
335 | export const Snackbar = (props: SnackbarProps) => <MUISnackbar {...props} />;
336 | export const SnackbarContent = (props: SnackbarContentProps) => (
337 |   <MUISnackbarContent {...props} />
338 | );
339 | export const SpeedDial = (props: SpeedDialProps) => <MUISpeedDial {...props} />;
340 | export const SpeedDialAction = (props: SpeedDialActionProps) => (
341 |   <MUISpeedDialAction {...props} />
342 | );
343 | export const SpeedDialIcon = (props: SpeedDialIconProps) => (
344 |   <MUISpeedDialIcon {...props} />
345 | );
346 | export const Stack = (props: StackProps) => <MUIStack {...props} />;
347 | export const Step = (props: StepProps) => <MUIStep {...props} />;
348 | export const StepButton = (props: StepButtonProps) => (
349 |   <MUIStepButton {...props} />
350 | );
351 | export const StepConnector = (props: StepConnectorProps) => (
352 |   <MUIStepConnector {...props} />
353 | );
354 | export const StepContent = (props: StepContentProps) => (
355 |   <MUIStepContent {...props} />
356 | );
357 | export const StepIcon = (props: StepIconProps) => <MUIStepIcon {...props} />;
358 | export const StepLabel = (props: StepLabelProps) => <MUIStepLabel {...props} />;
359 | export const Stepper = (props: StepperProps) => <MUIStepper {...props} />;
360 | export const SwipeableDrawer = (props: SwipeableDrawerProps) => (
361 |   <MUISwipeableDrawer {...props} />
362 | );
363 | export const Switch = (props: SwitchProps) => <MUISwitch {...props} />;
364 | export const Tab = (props: TabProps) => <MUITab {...props} />;
365 | export const TabScrollButton = (props: TabScrollButtonProps) => (
366 |   <MUITabScrollButton {...props} />
367 | );
368 | export const Table = (props: TableProps) => <MUITable {...props} />;
369 | export const TableBody = (props: TableBodyProps) => <MUITableBody {...props} />;
370 | export const TableCell = (props: TableCellProps) => <MUITableCell {...props} />;
371 | export const TableContainer = (props: TableContainerProps) => (
372 |   <MUITableContainer {...props} />
373 | );
374 | export const TableFooter = (props: TableFooterProps) => (
375 |   <MUITableFooter {...props} />
376 | );
377 | export const TableHead = (props: TableHeadProps) => <MUITableHead {...props} />;
378 | export const TablePagination = (props: TablePaginationProps) => (
379 |   <MUITablePagination {...props} />
380 | );
381 | export const TableRow = (props: TableRowProps) => <MUITableRow {...props} />;
382 | export const TableSortLabel = (props: TableSortLabelProps) => (
383 |   <MUITableSortLabel {...props} />
384 | );
385 | export const Tabs = (props: TabsProps) => <MUITabs {...props} />;
386 | export const TextField = (props: TextFieldProps) => <MUITextField {...props} />;
387 | export const TextareaAutosize = (props: TextareaAutosizeProps) => (
388 |   <MUITextareaAutosize {...props} />
389 | );
390 | export const ToggleButton = (props: ToggleButtonProps) => (
391 |   <MUIToggleButton {...props} />
392 | );
393 | export const ToggleButtonGroup = (props: ToggleButtonGroupProps) => (
394 |   <MUIToggleButtonGroup {...props} />
395 | );
396 | export const Toolbar = (props: ToolbarProps) => <MUIToolbar {...props} />;
397 | export const Tooltip = (props: TooltipProps) => <MUITooltip {...props} />;
398 | export const Typography = (props: TypographyProps) => (
399 |   <MUITypography {...props} />
400 | );
401 | export const Zoom = (props: ZoomProps) => <MUIZoom {...props} />;
402 | 


--------------------------------------------------------------------------------