├── src ├── index.css ├── vite-env.d.ts ├── dashboard │ ├── Title.tsx.preview │ ├── theme │ │ └── customizations │ │ │ ├── index.ts │ │ │ ├── treeView.ts │ │ │ └── charts.ts │ ├── README.md │ ├── components │ │ ├── MenuButton.jsx │ │ ├── MenuButton.tsx │ │ ├── Search.jsx │ │ ├── Search.tsx │ │ ├── CardAlert.jsx │ │ ├── CardAlert.tsx │ │ ├── NavbarBreadcrumbs.jsx │ │ ├── NavbarBreadcrumbs.tsx │ │ ├── Header.jsx │ │ ├── Header.tsx │ │ ├── CustomizedDataGrid.jsx │ │ ├── CustomizedDataGrid.tsx │ │ ├── HighlightedCard.jsx │ │ ├── HighlightedCard.tsx │ │ ├── CustomDatePicker.jsx │ │ ├── CustomDatePicker.tsx │ │ ├── MenuContent.jsx │ │ ├── MenuContent.tsx │ │ ├── SideMenuMobile.tsx │ │ ├── SideMenuMobile.jsx │ │ ├── SideMenu.jsx │ │ ├── SideMenu.tsx │ │ ├── OptionsMenu.jsx │ │ ├── OptionsMenu.tsx │ │ ├── PageViewsBarChart.tsx │ │ ├── PageViewsBarChart.jsx │ │ ├── MainGrid.jsx │ │ ├── MainGrid.tsx │ │ ├── AppNavbar.jsx │ │ ├── AppNavbar.tsx │ │ ├── SelectContent.jsx │ │ ├── SelectContent.tsx │ │ ├── StatCard.tsx │ │ └── StatCard.jsx │ ├── internals │ │ └── components │ │ │ ├── Copyright.jsx │ │ │ └── Copyright.tsx │ └── Dashboard.tsx ├── main.tsx ├── checkout │ ├── README.md │ └── components │ │ ├── Info.tsx │ │ ├── InfoMobile.tsx │ │ ├── Info.jsx │ │ ├── InfoMobile.jsx │ │ ├── Review.jsx │ │ ├── Review.tsx │ │ ├── AddressForm.jsx │ │ └── AddressForm.tsx ├── blog │ ├── README.md │ └── Blog.tsx ├── sign-in │ ├── README.md │ └── components │ │ ├── ForgotPassword.tsx │ │ └── ForgotPassword.jsx ├── sign-up │ └── README.md ├── crm │ ├── pages │ │ ├── Deals.tsx │ │ ├── Tasks.tsx │ │ ├── Customers.tsx │ │ ├── Reports.tsx │ │ ├── Contacts.tsx │ │ └── Settings.tsx │ ├── components │ │ ├── CrmHeader.tsx │ │ ├── CrmSelectCompany.tsx │ │ ├── CrmNavbarBreadcrumbs.tsx │ │ ├── CrmSearch.tsx │ │ ├── CrmLeadsBySourceChart.tsx │ │ ├── CrmOptionsMenu.tsx │ │ ├── CrmSideMenu.tsx │ │ ├── CrmCustomerDistributionMap.tsx │ │ ├── CrmDateRangePicker.tsx │ │ ├── CrmAppNavbar.tsx │ │ ├── CrmMenuContent.tsx │ │ ├── CrmActivitiesTimeline.tsx │ │ ├── CrmMainDashboard.tsx │ │ └── CrmSideMenuMobile.tsx │ └── CrmDashboard.tsx ├── sign-in-side │ ├── README.md │ ├── components │ │ ├── ForgotPassword.tsx │ │ ├── ForgotPassword.jsx │ │ ├── Content.jsx │ │ └── Content.tsx │ └── SignInSide.tsx ├── marketing-page │ ├── README.md │ ├── MarketingPage.tsx │ └── components │ │ ├── LogoCollection.jsx │ │ ├── LogoCollection.tsx │ │ ├── Highlights.jsx │ │ └── Highlights.tsx ├── shared-theme │ ├── ColorModeSelect.tsx │ ├── customizations │ │ ├── feedback.tsx │ │ └── surfaces.ts │ ├── AppTheme.tsx │ └── ColorModeIconDropdown.tsx ├── ProTip.tsx ├── App.tsx ├── PopOverMenu.tsx └── assets │ └── react.svg ├── tsconfig.json ├── vite.config.ts ├── .gitignore ├── tsconfig.node.json ├── tsconfig.app.json ├── index.html ├── README.md ├── package.json └── public └── vite.svg /src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/dashboard/Title.tsx.preview: -------------------------------------------------------------------------------- 1 | 2 | {props.children} 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/dashboard/theme/customizations/index.ts: -------------------------------------------------------------------------------- 1 | export { chartsCustomizations } from "./charts"; 2 | export { dataGridCustomizations } from "./dataGrid"; 3 | export { datePickersCustomizations } from "./datePickers"; 4 | export { treeViewCustomizations } from "./treeView"; 5 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tailwindcss()], 8 | }); 9 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App.tsx"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/checkout/README.md: -------------------------------------------------------------------------------- 1 | # Checkout template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`checkout` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react. 9 | 3. Import and use the `Checkout` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/checkout/. 16 | -------------------------------------------------------------------------------- /src/blog/README.md: -------------------------------------------------------------------------------- 1 | # Blog template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`blog` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, markdown-to-jsx. 9 | 3. Import and use the `Blog` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/blog/. 16 | -------------------------------------------------------------------------------- /src/sign-in/README.md: -------------------------------------------------------------------------------- 1 | # Sign-in template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`sign-in` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 9 | 3. Import and use the `SignIn` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/sign-in/. 16 | -------------------------------------------------------------------------------- /src/sign-up/README.md: -------------------------------------------------------------------------------- 1 | # Sign-up template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`sign-up` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 9 | 3. Import and use the `SignUp` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/sign-up/. 16 | -------------------------------------------------------------------------------- /src/crm/pages/Deals.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Box from "@mui/material/Box"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Deals() { 6 | return ( 7 | 8 | 9 | Deals Page 10 | 11 | 12 | This is the deals management page where you can track and manage your 13 | sales pipeline. 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/crm/pages/Tasks.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Box from "@mui/material/Box"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Tasks() { 6 | return ( 7 | 8 | 9 | Tasks Page 10 | 11 | 12 | This is the tasks management page where you can track all your 13 | activities and follow-ups. 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/crm/pages/Customers.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Box from "@mui/material/Box"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Customers() { 6 | return ( 7 | 8 | 9 | Customers Page 10 | 11 | 12 | This is the customers management page where you can view and manage your 13 | customer data. 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/crm/pages/Reports.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Box from "@mui/material/Box"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Reports() { 6 | return ( 7 | 8 | 9 | Reports Page 10 | 11 | 12 | This is the reports page where you can access and generate various 13 | analytics and insights. 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/crm/pages/Contacts.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Box from "@mui/material/Box"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Contacts() { 6 | return ( 7 | 8 | 9 | Contacts Page 10 | 11 | 12 | This is the contacts management page where you can organize and manage 13 | your business contacts. 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/crm/pages/Settings.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Box from "@mui/material/Box"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Settings() { 6 | return ( 7 | 8 | 9 | Settings Page 10 | 11 | 12 | This is the settings page where you can configure your CRM preferences 13 | and manage your account. 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/sign-in-side/README.md: -------------------------------------------------------------------------------- 1 | # Sign-in side template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`sign-in-side` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 9 | 3. Import and use the `SignInSide` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/sign-in-side/. 16 | -------------------------------------------------------------------------------- /src/marketing-page/README.md: -------------------------------------------------------------------------------- 1 | # Marketing page template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`marketing-page` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. 9 | 3. Import and use the `MarketingPage` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/marketing-page/. 16 | -------------------------------------------------------------------------------- /src/dashboard/README.md: -------------------------------------------------------------------------------- 1 | # Dashboard template 2 | 3 | ## Usage 4 | 5 | 6 | 7 | 1. Copy these folders (`dashboard` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). 8 | 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts, @mui/x-date-pickers, @mui/x-data-grid, @mui/x-tree-view, dayjs 9 | 3. Import and use the `Dashboard` component. 10 | 11 | ## Demo 12 | 13 | 14 | 15 | View the demo at https://mui.com/material-ui/getting-started/templates/dashboard/. 16 | -------------------------------------------------------------------------------- /src/dashboard/components/MenuButton.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import PropTypes from "prop-types"; 3 | import Badge, { badgeClasses } from "@mui/material/Badge"; 4 | import IconButton from "@mui/material/IconButton"; 5 | 6 | function MenuButton({ showBadge = false, ...props }) { 7 | return ( 8 | 14 | 15 | 16 | ); 17 | } 18 | 19 | MenuButton.propTypes = { 20 | showBadge: PropTypes.bool, 21 | }; 22 | 23 | export default MenuButton; 24 | -------------------------------------------------------------------------------- /src/dashboard/components/MenuButton.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Badge, { badgeClasses } from "@mui/material/Badge"; 3 | import IconButton, { IconButtonProps } from "@mui/material/IconButton"; 4 | 5 | export interface MenuButtonProps extends IconButtonProps { 6 | showBadge?: boolean; 7 | } 8 | 9 | export default function MenuButton({ 10 | showBadge = false, 11 | ...props 12 | }: MenuButtonProps) { 13 | return ( 14 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /src/dashboard/internals/components/Copyright.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Link from "@mui/material/Link"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Copyright(props) { 6 | return ( 7 | 18 | {"Copyright © "} 19 | 20 | Sitemark 21 | {" "} 22 | {new Date().getFullYear()} 23 | {"."} 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/dashboard/internals/components/Copyright.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Link from "@mui/material/Link"; 3 | import Typography from "@mui/material/Typography"; 4 | 5 | export default function Copyright(props: any) { 6 | return ( 7 | 18 | {"Copyright © "} 19 | 20 | Sitemark 21 | {" "} 22 | {new Date().getFullYear()} 23 | {"."} 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Material UI + TS + Tailwind CSS 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/blog/Blog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import CssBaseline from "@mui/material/CssBaseline"; 3 | import Container from "@mui/material/Container"; 4 | import AppTheme from "../shared-theme/AppTheme"; 5 | import AppAppBar from "./components/AppAppBar"; 6 | import MainContent from "./components/MainContent"; 7 | import Latest from "./components/Latest"; 8 | import Footer from "./components/Footer"; 9 | 10 | export default function Blog(props: { disableCustomTheme?: boolean }) { 11 | return ( 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 |