From c449b24b8c714f119f587f8d8da9b108d53b89c6 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 13:58:55 +0000 Subject: [PATCH 01/94] initial commit and cleanup --- docs/lib/sourcing.ts | 12 + docs/pages/customers.tsx | 59 ++++ .../components/customers/CustomerLogos.tsx | 99 ++++++ .../components/customers/CustomerQuotes.tsx | 225 ++++++++++++++ .../customers/CustomersTestimonials.tsx | 35 +++ docs/src/components/customers/LogosGrid.tsx | 288 ++++++++++++++++++ docs/src/components/customers/customerData.ts | 259 ++++++++++++++++ 7 files changed, 977 insertions(+) create mode 100644 docs/pages/customers.tsx create mode 100644 docs/src/components/customers/CustomerLogos.tsx create mode 100644 docs/src/components/customers/CustomerQuotes.tsx create mode 100644 docs/src/components/customers/CustomersTestimonials.tsx create mode 100644 docs/src/components/customers/LogosGrid.tsx create mode 100644 docs/src/components/customers/customerData.ts diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index b75f8f2c300eca..4f0f77001edd42 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -37,6 +37,8 @@ const ALLOWED_TAGS = [ 'Developer Survey', 'Guide', 'Product', + 'Case Study', + 'Customer', // Product tags 'Material UI', 'Base UI', @@ -79,3 +81,13 @@ export const getAllBlogPosts = () => { tagInfo, }; }; + +export const getCaseStudies = () => { + const filePaths = getBlogFilePaths(); + + const caseStudies = filePaths + .map((name) => getBlogPost(name)) + .filter((post) => post.slug.includes('case-study')); + + return caseStudies; +}; diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx new file mode 100644 index 00000000000000..d155d854b1a9c3 --- /dev/null +++ b/docs/pages/customers.tsx @@ -0,0 +1,59 @@ +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; +import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; +import CustomersHero from 'docs/src/components/customers/CustomersHero'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import Head from 'docs/src/modules/components/Head'; +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import Divider from '@mui/material/Divider'; +import CustomersSpotlight from 'docs/src/components/customers/CustomersSpotlight'; +import { getCaseStudies } from 'docs/lib/sourcing'; +import { InferGetStaticPropsType } from 'next'; +import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials'; +import CustomerLogos from 'docs/src/components/customers/CustomerLogos'; + +export const getStaticProps = () => { + const customers = getCaseStudies(); + return { + props: { + customers, + }, + }; +}; + +export default function Customers(props: InferGetStaticPropsType) { + return ( + + + + + +
+ + + + + + + + + + + + +
+ + + ); +} diff --git a/docs/src/components/customers/CustomerLogos.tsx b/docs/src/components/customers/CustomerLogos.tsx new file mode 100644 index 00000000000000..d9ddd17693ed82 --- /dev/null +++ b/docs/src/components/customers/CustomerLogos.tsx @@ -0,0 +1,99 @@ +import * as React from 'react'; +import dynamic from 'next/dynamic'; +import Stack from '@mui/material/Stack'; +import Chip from '@mui/material/Chip'; +import Section from 'docs/src/layouts/Section'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import { + MATERIAL_UI_CUSTOMERS, + BASE_UI_CUSTOMERS, + JOY_UI_CUSTOMERS, + DATA_GRID_CUSTOMERS, + DATE_TIME_CUSTOMERS, + CHARTS_CUSTOMERS, + TREE_VIEW_CUSTOMERS, + TOOLPAD_CUSTOMERS, +} from './customerData'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; + +const LogosGrid = dynamic(() => import('./LogosGrid')); + +const PRODUCT_CATEGORIES = [ + { label: 'Material UI', value: 'material-ui' }, + { label: 'Base UI', value: 'base-ui' }, + { label: 'Joy UI', value: 'joy-ui' }, + { label: 'Data Grid', value: 'data-grid' }, + { label: 'Date and Time Pickers', value: 'date-time' }, + { label: 'Charts', value: 'charts' }, + { label: 'Tree View', value: 'tree-view' }, + { label: 'Toolpad', value: 'toolpad' }, +] as const; + +type ProductCategory = (typeof PRODUCT_CATEGORIES)[number]['value']; + +// Map of product categories to their respective customers +const PRODUCT_CUSTOMERS: Record = { + 'material-ui': MATERIAL_UI_CUSTOMERS, + 'base-ui': BASE_UI_CUSTOMERS, + 'joy-ui': JOY_UI_CUSTOMERS, + 'data-grid': DATA_GRID_CUSTOMERS, + 'date-time': DATE_TIME_CUSTOMERS, + charts: CHARTS_CUSTOMERS, + 'tree-view': TREE_VIEW_CUSTOMERS, + toolpad: TOOLPAD_CUSTOMERS, +}; + +export default function CustomersLogos() { + const [activeCategory, setActiveCategory] = React.useState('material-ui'); + + return ( +
+ + MUI's comprehensive suite of UI tools
helps you +   ship better and faster + + } + /> + + {PRODUCT_CATEGORIES.map((category) => ( + setActiveCategory(category.value)} + sx={{ + borderRadius: '16px', + '&.MuiChip-root': { + backgroundColor: activeCategory === category.value ? 'primary.main' : 'transparent', + color: activeCategory === category.value ? 'primary.contrastText' : 'text.primary', + '&:hover': { + backgroundColor: + activeCategory === category.value ? 'primary.dark' : 'action.hover', + }, + }, + }} + /> + ))} + + + + +
+ ); +} diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx new file mode 100644 index 00000000000000..099c32a79f7ed5 --- /dev/null +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -0,0 +1,225 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Avatar from '@mui/material/Avatar'; + +const QUOTES = [ + + // Using current Testimonials as placeholders just to visualize the layout + + { + quote: + '"We\'ve relied on Material UI really heavily. I override a lot of default styles to try and make things our own, but the time we save with complex components like the Autocomplete and the Data Grid are so worth it. Every other library I try has 80% of what I\'m looking for when it comes to complex use cases, Material UI has it all under one roof which is a huge help for our small team."', + profile: { + avatarSrc: 'https://avatars.githubusercontent.com/u/21114044?s=58', + avatarSrcSet: 'https://avatars.githubusercontent.com/u/21114044?s=116 2x', + name: 'Kyle Gill', + role: 'Engineer & Designer', + company: ( + Particl logo + ), + gridArea: 'one', + }, + }, + { + quote: + '"Material UI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We\'re extremely grateful to the team for the time and effort spent maintaining the project."', + profile: { + avatarSrc: 'https://avatars.githubusercontent.com/u/197016?s=58', + avatarSrcSet: 'https://avatars.githubusercontent.com/u/197016?s=116 2x', + name: 'Jean-Laurent de Morlhon', + role: 'VP of Engineering', + company: ( + Docker logo + ), + gridArea: 'two', + }, + }, + { + quote: + '"Material UI offers a wide variety of high quality components that have allowed us to ship features faster. It has been used by more than a hundred engineers in our organization. What\'s more, Material UI\'s well architected customization system has allowed us to differentiate ourselves in the marketplace."', + profile: { + avatarSrc: 'https://avatars.githubusercontent.com/u/28296253?s=58', + avatarSrcSet: 'https://avatars.githubusercontent.com/u/28296253?s=116 2x', + name: 'Joona Rahko', + role: 'Staff Software Engineer', + company: ( + Unity logo + ), + gridArea: 'three', + }, + }, + { + quote: + '"After much research on React component libraries, we decided to ditch our in-house library for Material UI, using its powerful customization system to implement our Design System. This simple move did a rare thing in engineering: it lowered our maintenance costs while enhancing both developer and customer experience. All of this was done without sacrificing the organization\'s branding and visual identity."', + profile: { + avatarSrc: 'https://avatars.githubusercontent.com/u/732422?s=58', + avatarSrcSet: 'https://avatars.githubusercontent.com/u/732422?s=116 2x', + name: 'Gustavo de Paula', + role: 'Specialist Software Engineer', + company: ( + Loggi logo + ), + gridArea: 'four', + }, + }, +]; + +function Data({ + quote, + profile, +}: { + quote: string; + profile: { + avatarSrc: string; + avatarSrcSet: string; + name: string; + role: string; + gridArea: string; + company?: React.ReactElement; + }; +}) { + const isFirstColumn = profile.gridArea === 'one'; + const isLastColumn = profile.gridArea === 'four'; + + return ( + +
{profile.company}
+ + + {quote} + + +
+ + {profile.name} + + + {profile.role} + +
+ + + + + ); +} + +export default function CustomerQuotes() { + return ( + + {QUOTES.map((item) => ( + + + + ))} + + ); +} diff --git a/docs/src/components/customers/CustomersTestimonials.tsx b/docs/src/components/customers/CustomersTestimonials.tsx new file mode 100644 index 00000000000000..cf9cf9e6bd1c64 --- /dev/null +++ b/docs/src/components/customers/CustomersTestimonials.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import Typography from 'docs/src/pages/premium-themes/onepirate/modules/components/Typography'; +import dynamic from 'next/dynamic'; +import Box from '@mui/material/Box'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; + +const CustomerQuotes = dynamic(() => import('./CustomerQuotes')); + +export default function CustomersTestimonials() { + return ( + + + Trusted by +  the best  + in the game + + } + description="The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users." + /> + + + ); +} diff --git a/docs/src/components/customers/LogosGrid.tsx b/docs/src/components/customers/LogosGrid.tsx new file mode 100644 index 00000000000000..bcad8b22952028 --- /dev/null +++ b/docs/src/components/customers/LogosGrid.tsx @@ -0,0 +1,288 @@ +import * as React from 'react'; +import Grid from '@mui/material/Grid'; +import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import Link from 'next/link'; + +// These are all placeholders!!! +// TODO: fill with real data once design is approved + +export const CORE_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + }, + { + alt: 'Nasa logo', + name: 'companies/nasa', + mode: '', + width: 52, + height: 42, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + }, + { + alt: 'Unity logo', + name: 'companies/unity', + width: 69, + height: 52, + }, + { + alt: 'Shutterstock logo', + name: 'companies/shutterstock', + width: 100, + height: 52, + }, +]; + +export const ADVANCED_CUSTOMERS: Array = [ + { + alt: 'Southwest logo', + name: 'companies/southwest', + width: 130, + height: 54, + style: { + marginTop: -10, + }, + }, + { + alt: 'Tesla logo', + name: 'companies/tesla', + width: 140, + height: 52, + style: { + marginTop: -11, + }, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + style: { + marginTop: -21, + }, + }, + { + alt: 'Siemens logo', + name: 'companies/siemens', + mode: '', + width: 119, + height: 59, + style: { + marginTop: -13, + }, + }, + { + alt: 'Volvo logo', + name: 'companies/volvo', + width: 128, + height: 52, + style: { + marginTop: -11, + }, + }, + { + alt: 'Deloitte logo', + name: 'companies/deloitte', + width: 97, + height: 52, + style: { + marginTop: -12, + }, + }, +]; + +export const DESIGNKITS_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + }, + { + alt: 'X logo', + name: 'companies/x', + mode: '', + width: 30, + height: 30, + }, + { + alt: 'Salesforce logo', + name: 'companies/salesforce', + mode: '', + width: 50, + height: 52, + }, +]; + +export const TEMPLATES_CUSTOMERS: Array = [ + { + alt: 'Ebay logo', + name: 'companies/ebay', + width: 73, + height: 52, + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + }, + { + alt: 'Samsung logo', + name: 'companies/samsung', + mode: '', + width: 88, + height: 52, + }, + { + alt: 'Patreon logo', + name: 'companies/patreon', + width: 103, + height: 52, + }, + { + alt: 'AT&T logo', + name: 'companies/atandt', + width: 71, + height: 52, + }, + { + alt: 'Verizon logo', + name: 'companies/verizon', + width: 91, + height: 52, + }, +]; + +interface CustomerData extends IconImageProps { + hasCaseStudy?: boolean; + caseStudyUrl?: string; +} + +export default function LogosGrid({ data = [] }: { data?: Array }) { + const theme = useTheme(); + + if (!data || data.length === 0) { + return null; + } + + const sortedData = [...data].sort((a, b) => { + if (a.hasCaseStudy && !b.hasCaseStudy) { + return -1; + } + if (!a.hasCaseStudy && b.hasCaseStudy) { + return 1; + } + return 0; + }); + + return ( + + {sortedData.map((imgProps) => ( + + + {imgProps.hasCaseStudy && ( + + Read more + + + )} + + ))} + + ); +} diff --git a/docs/src/components/customers/customerData.ts b/docs/src/components/customers/customerData.ts new file mode 100644 index 00000000000000..3f2879948e1d85 --- /dev/null +++ b/docs/src/components/customers/customerData.ts @@ -0,0 +1,259 @@ +import { IconImageProps } from 'docs/src/components/icon/IconImage'; + +// These are all placeholders!!! +// TODO: fill with real data once design is approved + +interface CustomerData extends IconImageProps { + hasCaseStudy?: boolean; + caseStudyUrl?: string; +} + +export const MATERIAL_UI_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/spotify-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/netflix-case-study', + }, + { + alt: 'Unity logo', + name: 'companies/unity', + width: 69, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Shutterstock logo', + name: 'companies/shutterstock', + width: 100, + height: 52, + hasCaseStudy: false, + }, +]; + +export const BASE_UI_CUSTOMERS: Array = [ + { + alt: 'Southwest logo', + name: 'companies/southwest', + width: 130, + height: 54, + style: { + marginTop: -10, + }, + hasCaseStudy: true, + caseStudyUrl: '/blog/southwest-case-study', + }, + { + alt: 'Tesla logo', + name: 'companies/tesla', + width: 140, + height: 52, + style: { + marginTop: -11, + }, + hasCaseStudy: false, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + style: { + marginTop: -21, + }, + hasCaseStudy: true, + caseStudyUrl: '/blog/apple-case-study', + }, +]; + +export const JOY_UI_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/spotify-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/apple-case-study', + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + hasCaseStudy: false, + }, +]; + +export const DATA_GRID_CUSTOMERS: Array = [ + { + alt: 'Ebay logo', + name: 'companies/ebay', + width: 73, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/ebay-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Samsung logo', + name: 'companies/samsung', + mode: '', + width: 88, + height: 52, + hasCaseStudy: false, + }, +]; + +export const DATE_TIME_CUSTOMERS: Array = [ + { + alt: 'Patreon logo', + name: 'companies/patreon', + width: 103, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/patreon-case-study', + }, + { + alt: 'AT&T logo', + name: 'companies/atandt', + width: 71, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Verizon logo', + name: 'companies/verizon', + width: 91, + height: 52, + hasCaseStudy: false, + }, +]; + +export const CHARTS_CUSTOMERS: Array = [ + { + alt: 'Siemens logo', + name: 'companies/siemens', + mode: '', + width: 119, + height: 59, + style: { + marginTop: -13, + }, + hasCaseStudy: true, + caseStudyUrl: '/blog/siemens-case-study', + }, + { + alt: 'Volvo logo', + name: 'companies/volvo', + width: 128, + height: 52, + style: { + marginTop: -11, + }, + hasCaseStudy: false, + }, + { + alt: 'Deloitte logo', + name: 'companies/deloitte', + width: 97, + height: 52, + style: { + marginTop: -12, + }, + hasCaseStudy: false, + }, +]; + +export const TREE_VIEW_CUSTOMERS: Array = [ + { + alt: 'X logo', + name: 'companies/x', + mode: '', + width: 30, + height: 30, + hasCaseStudy: true, + caseStudyUrl: '/blog/x-case-study', + }, + { + alt: 'Salesforce logo', + name: 'companies/salesforce', + mode: '', + width: 50, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Nasa logo', + name: 'companies/nasa', + mode: '', + width: 52, + height: 42, + hasCaseStudy: false, + }, +]; + +export const TOOLPAD_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/spotify-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + hasCaseStudy: false, + }, +]; From f4ebea1d7fe663c1f562a0ee42b5a0e739ebee68 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 14:02:23 +0000 Subject: [PATCH 02/94] hero and empty showcase --- .../customers/CustomerSpotlight.tsx | 95 +++++++++++++++++++ .../components/customers/CustomersHero.tsx | 24 +++++ 2 files changed, 119 insertions(+) create mode 100644 docs/src/components/customers/CustomerSpotlight.tsx create mode 100644 docs/src/components/customers/CustomersHero.tsx diff --git a/docs/src/components/customers/CustomerSpotlight.tsx b/docs/src/components/customers/CustomerSpotlight.tsx new file mode 100644 index 00000000000000..bd300256e153fb --- /dev/null +++ b/docs/src/components/customers/CustomerSpotlight.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import { BlogPost } from 'docs/lib/sourcing'; +import Button from '@mui/material/Button'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import { Link } from '@mui/docs/Link'; +import Container from '@mui/material/Container'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; + +interface SpotlightProps { + posts: BlogPost[]; +} + +function Spotlight({ posts }: SpotlightProps) { + return ( + + + {posts.map((post, index) => ( + ({ + p: 2, + display: 'flex', + flexDirection: 'column', + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', + ...theme.applyDarkStyles({ + background: (theme.vars || theme).palette.primaryDark[900], + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', + }), + })} + > + {post.image && ( + + )} + + +

{post.title}

+

{post.description}

+ + + + ))} + + + ); +} + +interface CustomersSpotlightProps { + customers: BlogPost[]; +} + +export default function CustomersSpotlight({ customers }: CustomersSpotlightProps) { + const firstPosts = customers.slice(0, 2); + + return ; +} diff --git a/docs/src/components/customers/CustomersHero.tsx b/docs/src/components/customers/CustomersHero.tsx new file mode 100644 index 00000000000000..15c7370c86d94d --- /dev/null +++ b/docs/src/components/customers/CustomersHero.tsx @@ -0,0 +1,24 @@ +import Section from 'docs/src/layouts/Section'; +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; + +export default function CustomersHero() { + return ( +
+ + Meet the teams +
+ powered by MUI + + } + description="See how MUI's comprehensive suite of UI tools helps them ship better and faster" + /> +
+ ); +} From bdbbb9295c357905c6eb9e05bca91abe4771d3eb Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 14:06:15 +0000 Subject: [PATCH 03/94] add to nav --- docs/src/components/customers/CustomerQuotes.tsx | 2 +- .../{CustomerSpotlight.tsx => CustomersSpotlight.tsx} | 0 docs/src/components/header/HeaderNavBar.tsx | 3 +++ docs/src/route.ts | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) rename docs/src/components/customers/{CustomerSpotlight.tsx => CustomersSpotlight.tsx} (100%) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index 099c32a79f7ed5..ce0ce9ace5a013 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -6,7 +6,7 @@ import Avatar from '@mui/material/Avatar'; const QUOTES = [ - // Using current Testimonials as placeholders just to visualize the layout + // Using current Testimonials as placeholders just to visualize { quote: diff --git a/docs/src/components/customers/CustomerSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx similarity index 100% rename from docs/src/components/customers/CustomerSpotlight.tsx rename to docs/src/components/customers/CustomersSpotlight.tsx diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index 16ba5aa2759a7c..6690bd1ca9ab17 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -412,6 +412,9 @@ export default function HeaderNavBar() {
  • Blog
    • +
  • + Customers +
    • ); diff --git a/docs/src/route.ts b/docs/src/route.ts index 3d1ffccbc7d64a..8f95030ede46a9 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -10,6 +10,7 @@ const ROUTES = { pricing: '/pricing/', about: '/about/', blog: '/blog/', + customers: '/customers/', // Material UI doc pages materialDocs: '/material-ui/getting-started/', materialIcons: '/material-ui/material-icons/', From ea6d0ff93af1fa86f21c9fcc91a79d653ae184be Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 14:12:41 +0000 Subject: [PATCH 04/94] add dummy blogposts for showcase --- docs/pages/blog/dummy-case-study-two.js | 7 +++++++ docs/pages/blog/dummy-case-study-two.md | 9 +++++++++ docs/pages/blog/dummy-case-study.js | 7 +++++++ docs/pages/blog/dummy-case-study.md | 9 +++++++++ 4 files changed, 32 insertions(+) create mode 100644 docs/pages/blog/dummy-case-study-two.js create mode 100644 docs/pages/blog/dummy-case-study-two.md create mode 100644 docs/pages/blog/dummy-case-study.js create mode 100644 docs/pages/blog/dummy-case-study.md diff --git a/docs/pages/blog/dummy-case-study-two.js b/docs/pages/blog/dummy-case-study-two.js new file mode 100644 index 00000000000000..059bb1609f6a2c --- /dev/null +++ b/docs/pages/blog/dummy-case-study-two.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './dummy-case-study-two.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/dummy-case-study-two.md b/docs/pages/blog/dummy-case-study-two.md new file mode 100644 index 00000000000000..e59409d532722d --- /dev/null +++ b/docs/pages/blog/dummy-case-study-two.md @@ -0,0 +1,9 @@ +--- +title: Example case study +description: This is an example case study for the Customers page. +image: 'https://i.ibb.co/k3W3v7x/example-3.png' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- diff --git a/docs/pages/blog/dummy-case-study.js b/docs/pages/blog/dummy-case-study.js new file mode 100644 index 00000000000000..d1092d619ea1c6 --- /dev/null +++ b/docs/pages/blog/dummy-case-study.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './dummy-case-study.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/dummy-case-study.md b/docs/pages/blog/dummy-case-study.md new file mode 100644 index 00000000000000..e59409d532722d --- /dev/null +++ b/docs/pages/blog/dummy-case-study.md @@ -0,0 +1,9 @@ +--- +title: Example case study +description: This is an example case study for the Customers page. +image: 'https://i.ibb.co/k3W3v7x/example-3.png' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- From e6b457d044b557b7522454123bcb5a7ee6667cdd Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 14:17:42 +0000 Subject: [PATCH 05/94] entity codes --- docs/src/components/customers/CustomersHero.tsx | 2 +- docs/src/components/customers/CustomersTestimonials.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/customers/CustomersHero.tsx b/docs/src/components/customers/CustomersHero.tsx index 15c7370c86d94d..48eba3d694393a 100644 --- a/docs/src/components/customers/CustomersHero.tsx +++ b/docs/src/components/customers/CustomersHero.tsx @@ -17,7 +17,7 @@ export default function CustomersHero() { powered by MUI } - description="See how MUI's comprehensive suite of UI tools helps them ship better and faster" + description="See how MUI's comprehensive suite of UI tools helps them ship better and faster" /> ); diff --git a/docs/src/components/customers/CustomersTestimonials.tsx b/docs/src/components/customers/CustomersTestimonials.tsx index cf9cf9e6bd1c64..8fc8049fdbd63f 100644 --- a/docs/src/components/customers/CustomersTestimonials.tsx +++ b/docs/src/components/customers/CustomersTestimonials.tsx @@ -27,7 +27,7 @@ export default function CustomersTestimonials() { in the game } - description="The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users." + description="The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users." /> From 2d853918655d3b20c53682b3e555ef895539aada Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 15:09:24 +0000 Subject: [PATCH 06/94] temporary fix particl logo --- docs/src/components/customers/CustomerQuotes.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index ce0ce9ace5a013..b72c165911e9a9 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -23,6 +23,7 @@ const QUOTES = [ height="16" alt="Particl logo" loading="lazy" + style={{ filter: 'invert(50%)' }} /> ), gridArea: 'one', From 957dd0101ccb424ba5df62450e105d163eb93a8b Mon Sep 17 00:00:00 2001 From: alelthomas Date: Tue, 25 Mar 2025 15:18:37 +0000 Subject: [PATCH 07/94] add page description --- docs/pages/customers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx index d155d854b1a9c3..42b981af2f3e19 100644 --- a/docs/pages/customers.tsx +++ b/docs/pages/customers.tsx @@ -27,7 +27,7 @@ export const getStaticProps = () => { export default function Customers(props: InferGetStaticPropsType) { return ( - + From 95ab0a0522ea39f1bb6b804819c6b2a771a1b28c Mon Sep 17 00:00:00 2001 From: alelthomas Date: Mon, 7 Apr 2025 10:34:56 -0400 Subject: [PATCH 08/94] add divider --- docs/pages/customers.tsx | 26 +++++++++---------- .../components/customers/CustomerLogos.tsx | 3 ++- .../customers/CustomersSpotlight.tsx | 1 + 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx index 42b981af2f3e19..53bc4fdcb8f2a5 100644 --- a/docs/pages/customers.tsx +++ b/docs/pages/customers.tsx @@ -5,7 +5,6 @@ import AppHeader from 'docs/src/layouts/AppHeader'; import Head from 'docs/src/modules/components/Head'; import * as React from 'react'; import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; import AppFooter from 'docs/src/layouts/AppFooter'; import HeroEnd from 'docs/src/components/home/HeroEnd'; import Divider from '@mui/material/Divider'; @@ -33,23 +32,22 @@ export default function Customers(props: InferGetStaticPropsType
    - - - - - + + + +
    diff --git a/docs/src/components/customers/CustomerLogos.tsx b/docs/src/components/customers/CustomerLogos.tsx index d9ddd17693ed82..51fc959e7e0f43 100644 --- a/docs/src/components/customers/CustomerLogos.tsx +++ b/docs/src/components/customers/CustomerLogos.tsx @@ -49,7 +49,7 @@ export default function CustomersLogos() { const [activeCategory, setActiveCategory] = React.useState('material-ui'); return ( -
    +
    {posts.map((post, index) => ( From f0aafff9ddb5c5c2a9d6546d4423683861f29b15 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Mon, 7 Apr 2025 11:44:13 -0400 Subject: [PATCH 09/94] switch to gradient for customer quotes --- .../components/customers/CustomerQuotes.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index b72c165911e9a9..ad84cbb37d2cbc 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -5,7 +5,6 @@ import Grid from '@mui/material/Grid'; import Avatar from '@mui/material/Avatar'; const QUOTES = [ - // Using current Testimonials as placeholders just to visualize { @@ -110,7 +109,7 @@ function Data({ return ( ({ p: 3, height: '100%', display: 'flex', @@ -119,12 +118,12 @@ function Data({ color: 'text.primary', border: '1px solid', borderColor: 'divider', - backgroundColor: 'background.paper', - '&:hover': { - backgroundColor: 'action.hover', - }, + background: `linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 10%, #FFF 100%)`, + ...theme.applyDarkStyles({ + background: 'linear-gradient(180deg, #131C23 10%, #15181A 100%)', + }), gap: 2, - }} + })} >
    {profile.company}
    @@ -156,9 +154,7 @@ function Data({ {profile.name} - - {profile.role} - + {profile.role} Date: Mon, 7 Apr 2025 11:59:17 -0400 Subject: [PATCH 10/94] fix code style issues --- docs/src/components/customers/CustomersHero.tsx | 2 +- .../components/customers/CustomersTestimonials.tsx | 2 +- docs/src/components/customers/LogosGrid.tsx | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/components/customers/CustomersHero.tsx b/docs/src/components/customers/CustomersHero.tsx index 48eba3d694393a..15c7370c86d94d 100644 --- a/docs/src/components/customers/CustomersHero.tsx +++ b/docs/src/components/customers/CustomersHero.tsx @@ -17,7 +17,7 @@ export default function CustomersHero() { powered by MUI } - description="See how MUI's comprehensive suite of UI tools helps them ship better and faster" + description="See how MUI's comprehensive suite of UI tools helps them ship better and faster" />
    ); diff --git a/docs/src/components/customers/CustomersTestimonials.tsx b/docs/src/components/customers/CustomersTestimonials.tsx index 8fc8049fdbd63f..cf9cf9e6bd1c64 100644 --- a/docs/src/components/customers/CustomersTestimonials.tsx +++ b/docs/src/components/customers/CustomersTestimonials.tsx @@ -27,7 +27,7 @@ export default function CustomersTestimonials() { in the game } - description="The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users." + description="The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users." /> diff --git a/docs/src/components/customers/LogosGrid.tsx b/docs/src/components/customers/LogosGrid.tsx index bcad8b22952028..6a60e3a8f62fa8 100644 --- a/docs/src/components/customers/LogosGrid.tsx +++ b/docs/src/components/customers/LogosGrid.tsx @@ -255,16 +255,16 @@ export default function LogosGrid({ data = [] }: { data?: Array }) }} size={{ xs: 6, sm: 4, md: 2 }} > - {imgProps.hasCaseStudy && ( @@ -274,7 +274,7 @@ export default function LogosGrid({ data = [] }: { data?: Array }) sx={{ display: 'flex', alignItems: 'center', - gap: 0 + gap: 0, }} > Read more From a65ac32a9ef4b4dbe7162ab5a822029782b4107d Mon Sep 17 00:00:00 2001 From: alelthomas Date: Mon, 7 Apr 2025 12:36:32 -0400 Subject: [PATCH 11/94] gradient conditional to match design --- docs/src/components/customers/CustomerQuotes.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index ad84cbb37d2cbc..d71fa8bfd419b1 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -118,9 +118,15 @@ function Data({ color: 'text.primary', border: '1px solid', borderColor: 'divider', - background: `linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 10%, #FFF 100%)`, + background: + isFirstColumn || isLastColumn + ? `linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 10%, #FFF 100%)` + : 'background.paper', ...theme.applyDarkStyles({ - background: 'linear-gradient(180deg, #131C23 10%, #15181A 100%)', + background: + isFirstColumn || isLastColumn + ? 'linear-gradient(180deg, #131C23 10%, #15181A 100%)' + : 'background.paper', }), gap: 2, })} From e63e022c2c43f325e17622159a700aaa1f9a68a8 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Mon, 7 Apr 2025 14:25:28 -0400 Subject: [PATCH 12/94] add dotted pattern to gradient bg --- docs/src/components/customers/CustomerQuotes.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index d71fa8bfd419b1..eb1a5f9352cca2 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -120,12 +120,14 @@ function Data({ borderColor: 'divider', background: isFirstColumn || isLastColumn - ? `linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 10%, #FFF 100%)` + ? `radial-gradient(white 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 10%, #FFF 100%)` : 'background.paper', ...theme.applyDarkStyles({ background: isFirstColumn || isLastColumn - ? 'linear-gradient(180deg, #131C23 10%, #15181A 100%)' + ? `radial-gradient(#15181A 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, #131C23 10%, #15181A 100%)` : 'background.paper', }), gap: 2, From 3e6a4b2ca14b197e3bce1d53ad771d1c02aece5e Mon Sep 17 00:00:00 2001 From: alelthomas Date: Thu, 10 Apr 2025 11:21:42 -0700 Subject: [PATCH 13/94] adjust button colors --- docs/src/components/customers/CustomerLogos.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/src/components/customers/CustomerLogos.tsx b/docs/src/components/customers/CustomerLogos.tsx index 51fc959e7e0f43..14108764145d8f 100644 --- a/docs/src/components/customers/CustomerLogos.tsx +++ b/docs/src/components/customers/CustomerLogos.tsx @@ -78,17 +78,25 @@ export default function CustomersLogos() { key={category.value} label={category.label} onClick={() => setActiveCategory(category.value)} - sx={{ - borderRadius: '16px', + sx={(theme) => ({ + borderRadius: '18px', '&.MuiChip-root': { backgroundColor: activeCategory === category.value ? 'primary.main' : 'transparent', - color: activeCategory === category.value ? 'primary.contrastText' : 'text.primary', + border: activeCategory === category.value ? '1px solid' : 'none', + borderColor: activeCategory === category.value ? 'secondary.main' : 'none', + color: activeCategory === category.value ? 'white' : 'text.secondary', + ...theme.applyDarkStyles({ + backgroundColor: activeCategory === category.value ? '#0C1D2F' : 'transparent', + border: activeCategory === category.value ? '1px solid' : 'none', + borderColor: activeCategory === category.value ? 'primary.dark' : 'none', + color: activeCategory === category.value ? 'text.primary' : 'text.primary', + }), '&:hover': { backgroundColor: activeCategory === category.value ? 'primary.dark' : 'action.hover', }, }, - }} + })} /> ))} From b91682773f1615cbd5d62b0ae207adf849f4159b Mon Sep 17 00:00:00 2001 From: alelthomas Date: Thu, 10 Apr 2025 12:39:02 -0700 Subject: [PATCH 14/94] update gradient colors --- docs/src/components/customers/CustomerQuotes.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index eb1a5f9352cca2..1868d08594c51a 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -120,14 +120,14 @@ function Data({ borderColor: 'divider', background: isFirstColumn || isLastColumn - ? `radial-gradient(white 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, - linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 10%, #FFF 100%)` + ? `radial-gradient(#ebf5ff 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 5%, #FFF 20%)` : 'background.paper', ...theme.applyDarkStyles({ background: isFirstColumn || isLastColumn - ? `radial-gradient(#15181A 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, - linear-gradient(180deg, #131C23 10%, #15181A 100%)` + ? `radial-gradient(#131C23 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, #131C23 5%, #15181A 20%)` : 'background.paper', }), gap: 2, From 2c4e393e69fb9df16e94521f52ee60d5d7bd4c2f Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Tue, 17 Jun 2025 18:04:17 +0530 Subject: [PATCH 15/94] test --- ...case-study-two.js => case-study-athena.js} | 2 +- docs/pages/blog/case-study-athena.md | 72 +++++++++++++++++ ...{dummy-case-study.js => case-study-att.js} | 2 +- docs/pages/blog/case-study-att.md | 61 ++++++++++++++ docs/pages/blog/case-study-cgi.js | 7 ++ docs/pages/blog/case-study-cgi.md | 79 +++++++++++++++++++ docs/pages/blog/case-study-deliveryhero.js | 7 ++ docs/pages/blog/case-study-deliveryhero.md | 62 +++++++++++++++ docs/pages/blog/case-study-johndeere.js | 7 ++ docs/pages/blog/case-study-johndeere.md | 55 +++++++++++++ docs/pages/blog/case-study-moz.js | 7 ++ docs/pages/blog/case-study-moz.md | 67 ++++++++++++++++ docs/pages/blog/case-study-oregon.js | 7 ++ docs/pages/blog/case-study-oregon.md | 64 +++++++++++++++ docs/pages/blog/dummy-case-study-two.md | 9 --- docs/pages/blog/dummy-case-study.md | 9 --- docs/pages/customers.tsx | 6 +- .../customers/CustomersSpotlight.tsx | 34 +++++--- 18 files changed, 522 insertions(+), 35 deletions(-) rename docs/pages/blog/{dummy-case-study-two.js => case-study-athena.js} (74%) create mode 100644 docs/pages/blog/case-study-athena.md rename docs/pages/blog/{dummy-case-study.js => case-study-att.js} (75%) create mode 100644 docs/pages/blog/case-study-att.md create mode 100644 docs/pages/blog/case-study-cgi.js create mode 100644 docs/pages/blog/case-study-cgi.md create mode 100644 docs/pages/blog/case-study-deliveryhero.js create mode 100644 docs/pages/blog/case-study-deliveryhero.md create mode 100644 docs/pages/blog/case-study-johndeere.js create mode 100644 docs/pages/blog/case-study-johndeere.md create mode 100644 docs/pages/blog/case-study-moz.js create mode 100644 docs/pages/blog/case-study-moz.md create mode 100644 docs/pages/blog/case-study-oregon.js create mode 100644 docs/pages/blog/case-study-oregon.md delete mode 100644 docs/pages/blog/dummy-case-study-two.md delete mode 100644 docs/pages/blog/dummy-case-study.md diff --git a/docs/pages/blog/dummy-case-study-two.js b/docs/pages/blog/case-study-athena.js similarity index 74% rename from docs/pages/blog/dummy-case-study-two.js rename to docs/pages/blog/case-study-athena.js index 059bb1609f6a2c..da88969b475b27 100644 --- a/docs/pages/blog/dummy-case-study-two.js +++ b/docs/pages/blog/case-study-athena.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './dummy-case-study-two.md?muiMarkdown'; +import { docs } from './case-study-athena.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/case-study-athena.md b/docs/pages/blog/case-study-athena.md new file mode 100644 index 00000000000000..138cb061ba30a5 --- /dev/null +++ b/docs/pages/blog/case-study-athena.md @@ -0,0 +1,72 @@ +--- +title: Athena Intelligence +description: How Athena Intelligence Accelerated UI Development with MUI X. +image: '/static/branding/companies/amazon-light.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + +## How Athena Intelligence Accelerated UI Development with MUI X + +***** + +Athena Intelligence provides Olympus, world's first AI-native analytics platform designed for seamless human-machine collaboration. Olympus empowers organizations to unlock the full potential of their data and drive intelligent decision-making. + +## Challenge +Athena needed a customizable and performant UI framework to build their schema management interface, which required handling large datasets and ensuring a smooth user experience. + +## Solution +To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X’s structured approach to UI development. Key benefits of using MUI X: +- Higher-level abstractions – Built on top of MUI (Material UI) for seamless integration. +- Faster iteration cycles – Simplified the development of complex UI components. +- Component-based architecture – Aligned perfectly with React’s ecosystem. +- Efficient code organization – Improved maintainability over inline styling methods like Tailwind. + + +## Solution +To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X’s structured approach to UI development. Key benefits of using MUI X: +- Higher-level abstractions – Built on top of MUI (Material UI) for seamless integration. +- Faster iteration cycles – Simplified the development of complex UI components. +- Component-based architecture – Aligned perfectly with React’s ecosystem. +- Efficient code organization – Improved maintainability over inline styling methods like Tailwind. + +## Results +After integrating MUI X, Athena Intelligence saw: +- Increased development speed – Reducing time-to-market for complex UI features. +- Improved UI consistency – A polished and cohesive experience across the platform. +- Better performance & flexibility – Smooth, interactive data management without performance bottlenecks. + + +## Developer Experience & Documentation +Athena Intelligence found MUI X’s documentation to be highly detailed and structured, making it easy to: +- Implement complex features like editing, selection, and customization. +- Quickly onboard developers with clear, step-by-step guides. +- Optimize the development process, accelerating feature rollouts. + +## Recommendation +For developers looking to build complex, interactive UI components, Athena Intelligence highly recommends MUI X. Its deep customization options, seamless React integration, and structured documentation make it an excellent choice for UI-heavy applications. +A defining moment came when the team rapidly implemented direct asset renaming and customized components using MUI X. The ease of integration and instant improvements in interactivity and UI cohesion reinforced the framework’s powerful capabilities. +MUI X is now an essential tool in Athena Intelligence’s development stack, enabling rapid, scalable, and high-performance UI solutions. + +> “MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure.” + – Brendon Geils, Founder, Athena Intelligence diff --git a/docs/pages/blog/dummy-case-study.js b/docs/pages/blog/case-study-att.js similarity index 75% rename from docs/pages/blog/dummy-case-study.js rename to docs/pages/blog/case-study-att.js index d1092d619ea1c6..cd41ff1a5cd74b 100644 --- a/docs/pages/blog/dummy-case-study.js +++ b/docs/pages/blog/case-study-att.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './dummy-case-study.md?muiMarkdown'; +import { docs } from './case-study-att.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/case-study-att.md b/docs/pages/blog/case-study-att.md new file mode 100644 index 00000000000000..09bd9b7a8d3db9 --- /dev/null +++ b/docs/pages/blog/case-study-att.md @@ -0,0 +1,61 @@ +--- +title: AT&T +description: How AT&T streamlined performance dashboards with MUI X. +image: '/static/branding/companies/nasa.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + +## How AT&T streamlined performance dashboards with MUI X + +***** + +AT&T, a leading global telecommunications company, develops advanced tools to enhance productivity and performance across its Retail and Call Center teams. Their internal applications, MyResults and MyCOACH, serve as key platforms for performance tracking and coaching within the organization. + +## Challenge + +They needed a highly customizable, efficient UI solution to help them deliver more consistent performance dashboards across their applications. They wanted to have a standard look and feel across their dashbaords and were looking for a solution that helps them build fast. + +## Solution +To power MyResults and MyCOACH, AT&T integrated **MUI X Data Grid Premium**, leveraging its robust features and flexible customization options. Key benefits of using MUI X Data Grid: +- Faster development – Accelerated UI implementation across applications. +- Customizable UI – Adaptable components tailored to AT&T’s needs. +- Consistent design – Ensured a unified user experience across multiple tools. + + +## Results +By integrating MUI X, AT&T achieved: +- Increased development efficiency – Faster deployment of dashboard features. +- Improved UI consistency – A standardized, professional interface. +- Enhanced customization – Greater flexibility in designing performance dashboards. + + +## DevEx +AT&T’s developers found MUI X documentation to be clear and reliable, ensuring smooth implementation without issues. + +## Recommendation +AT&T recommends MUI X for teams looking to build scalable, standardized, and customizable UI components. MUI X enabled seamless integration and customization, reinforcing its value as a go-to UI framework for AT&T’s internal tools. + + +> “MUI X has enabled us to develop faster and maintain standards across our multiple applications.” + – Bliss Keith, AT&T diff --git a/docs/pages/blog/case-study-cgi.js b/docs/pages/blog/case-study-cgi.js new file mode 100644 index 00000000000000..1fe39bbe35d4fb --- /dev/null +++ b/docs/pages/blog/case-study-cgi.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './case-study-cgi.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/case-study-cgi.md b/docs/pages/blog/case-study-cgi.md new file mode 100644 index 00000000000000..0a9ee62ca787a4 --- /dev/null +++ b/docs/pages/blog/case-study-cgi.md @@ -0,0 +1,79 @@ +--- +title: CGI +description: How CGI’s Techyon Project Enhanced Performance & Usability with MUI X. +image: '/static/branding/companies/netflix.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + + +## How CGI’s Techyon Project Enhanced Performance & Usability with MUI X + +***** + +CGI is a global leader in IT and business consulting, providing innovative digital solutions across various industries. Their Techyon project is dedicated to transforming the energy sector by integrating AI, machine learning, IoT, and cloud-based services to optimize internal operations and data flow. + +## Challenge +As the energy sector undergoes rapid transformation, CGI needed a high-performance, scalable GUI to support Techyon’s advanced capabilities. Their key challenges included: +Performance Issues – Handling massive datasets (over 10 terawatts of data in Google Cloud) efficiently. +Usability & Consistency – Creating an intuitive, user-friendly interface for energy operators and analysts. +Slow Development Speed – Ensuring developers could quickly build and iterate on the UI. +Developer Consistency – Standardizing the design approach across teams. + + +## Solution +CGI adopted MUI X Premium Data Grid as the foundation for Techyon’s GUI, providing: +- A seamless, modern UI for managing workflows and energy data. +- High-performance data handling, even with tens of thousands of rows displayed at once. +- Structured, easy-to-use components, enabling developers to build interfaces effortlessly. +- A consistent design system, ensuring a professional and unified look across the platform. + +## Results +After implementing MUI X, the Techyon team experienced: +- Instant performance improvements – Large datasets loaded smoothly, eliminating lag. +- A streamlined design process – Developers could create polished interfaces without needing a design background. +- Faster development cycles – MUI X’s well-documented components simplified UI implementation. + +> “MUI X helps our developers—who aren’t designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality.” + +> “When we switched to MUI X’s Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic.” +MUI X quickly became a go-to tool in Techyon’s stack, helping CGI deliver a high-performance, future-ready solution for the energy industry. + – Helge Andersen, Team Leader, CGI + + +## Developer Experience & Best Practices +CGI’s team found MUI X’s documentation to be clear, organized, and developer-friendly, making it easy for both new and experienced developers to integrate and optimize components. + + +Pro Tip from CGI: For developers handling large datasets, MUI X’s Data Grid is highly optimized, but profiling your UI and using pagination or lazy loading can further enhance performance. + +## Recommendation +For teams looking to build data-heavy applications efficiently, CGI highly recommends MUI X as a powerful, time-saving solution. Its advanced components (such as grids, filters, and tables) provide both flexibility and enterprise-grade performance. +Before MUI X, the team struggled with performance bottlenecks when handling large datasets without pagination—leading to slow load times and poor user experience. +- Switching to MUI X Data Grid was a game-changer: +- Instant data loading – No more sluggish UI. +- Custom filtering & real-time adjustments – Meeting client needs with ease. +- Scalability & flexibility – Adapting effortlessly to industry demands. + + + diff --git a/docs/pages/blog/case-study-deliveryhero.js b/docs/pages/blog/case-study-deliveryhero.js new file mode 100644 index 00000000000000..d2354f6de4a7b6 --- /dev/null +++ b/docs/pages/blog/case-study-deliveryhero.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './case-study-deliveryhero.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/case-study-deliveryhero.md b/docs/pages/blog/case-study-deliveryhero.md new file mode 100644 index 00000000000000..35c321df059552 --- /dev/null +++ b/docs/pages/blog/case-study-deliveryhero.md @@ -0,0 +1,62 @@ +--- +title: Delivery Hero +description: How DeliveryHero Partner Portal Streamlined Development with MUI X. +image: '/static/branding/companies/volvo-light.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + +## How DeliveryHero Partner Portal Streamlined Development with MUI X + +***** + +DeliveryHero Partner Portal provides restaurant and local shop management solutions for the global food delivery market. Their platform equips vendors with the tools they need to manage operations efficiently, enhance customer experience, and optimize performance. + +## Challenge +Before adopting MUI X, the DeliveryHero team faced two major challenges: +- Slow Development Speed – Building and refining UI components took too much time. +- Usability & Consistency – Ensuring a seamless and intuitive experience for end-users was difficult. + + +## Solution +To address these challenges, the team integrated MUI X Pro Date and Time Pickers and Data Grid Pro into their platform. These components enabled them to: +- Accelerate Development – Pre-built, high-quality components reduced time spent on UI implementation. +- Enhance Usability – A modern, sleek UI improved user interactions and consistency. +- Optimize Performance – The solution provided a smooth experience for restaurant and shop managers. + + +## Results +After implementing MUI X, the team saw immediate benefits: +- Faster feature development with less effort. +- Improved UI/UX consistency across the platform. +- Reduced user clicks when interacting with date and time inputs. + +> “By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort.” – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero + + +## Documentation Experience & Feedback +The team also praised MUI X’s documentation, describing it as clear, well-structured, and easy to follow, which helped their developers integrate and customize components effortlessly. + +## Recommendation +For developers looking to build modern, high-performance UI components with minimal effort, the DeliveryHero team highly recommends MUI X. +One key success story was the implementation of the Date Time Picker, which significantly reduced the number of clicks required for users to achieve their desired results. This simple enhancement greatly improved user efficiency and satisfaction. \ No newline at end of file diff --git a/docs/pages/blog/case-study-johndeere.js b/docs/pages/blog/case-study-johndeere.js new file mode 100644 index 00000000000000..8b42184fdea3ec --- /dev/null +++ b/docs/pages/blog/case-study-johndeere.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './case-study-johndeere.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/case-study-johndeere.md b/docs/pages/blog/case-study-johndeere.md new file mode 100644 index 00000000000000..84bc0e0a62c173 --- /dev/null +++ b/docs/pages/blog/case-study-johndeere.md @@ -0,0 +1,55 @@ +--- +title: John Deere +description: How John Deere Standardized UI Development with MUI X. +image: '/static/branding/companies/tesla-light.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + +## How John Deere Standardized UI Development with MUI X + +***** + +John Deere is a global leader in agricultural, construction, and forestry machinery. With a strong emphasis on innovation, their teams build solutions that enhance efficiency and productivity across industries. + +### Challenge +With multiple teams working towards different design goals, maintaining consistency for developers was a major challenge. John Deere needed a reliable, standardized component library to bridge the gaps in their internal design system. + +## Solution +By integrating MUI X Premium Data Grid, John Deere’s teams found a baseline of standardized components to rely on, ensuring a cohesive development approach where their Fuel Design System didn’t provide the necessary coverage. + +## Results +✅ Improved Consistency – Developers could use MUI X as a standardized foundation across teams. + ✅ Faster Development – Teams saved time by leveraging ready-to-use, high-performance components. + ✅ Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. + + +## Documentation Experience & Feedback +While the MUI X documentation was useful, the team found it challenging to understand recent pricing changes and how to forecast costs for various groups using the tool. + +## Recommendation +For developers working with John Deere’s Fuel Design System, MUI X is a great complement when additional features or components are needed. +A notable experiment involved testing heatmaps with their current key to determine the watermark for non-grandfathered functionality—an innovative approach to balancing licensing considerations with usability needs. + +> “MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap.” + – Tyler Mitchell, Engineering Manager, John Deere \ No newline at end of file diff --git a/docs/pages/blog/case-study-moz.js b/docs/pages/blog/case-study-moz.js new file mode 100644 index 00000000000000..8547907ca1c1f0 --- /dev/null +++ b/docs/pages/blog/case-study-moz.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './case-study-moz.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/case-study-moz.md b/docs/pages/blog/case-study-moz.md new file mode 100644 index 00000000000000..5d4f68a47b40ad --- /dev/null +++ b/docs/pages/blog/case-study-moz.md @@ -0,0 +1,67 @@ +--- +title: Moz +description: How Moz Optimized Large-Scale Keyword Analysis with MUI X. +image: '/static/branding/companies/ebay-light.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + +## How Moz Optimized Large-Scale Keyword Analysis with MUI X + +***** + +Moz, a leader in SEO software and analytics, provides powerful tools for keyword research, site audits, and rank tracking. To handle large-scale keyword analysis, Moz required a robust UI solution capable of managing massive datasets efficiently. +The Challenge +Moz needed a UI framework that could handle: +Performance Optimization – Efficient rendering of large keyword datasets. +Customization – Flexible UI for filtering, sorting, and managing data. +Consistency – A standardized development experience for its engineering team. +Usability – A seamless user experience for navigating complex data grids. + + +## Solution +To meet these challenges, Moz integrated MUI X Premium, leveraging its Data Grid and Date Picker components to create an optimized, interactive, and scalable UI. +Key benefits of using MUI X: + ✅ Optimized DX & UX – A developer-friendly and intuitive user experience. + ✅ Advanced Customization – Built highly tailored components using Data Grid API refs. + ✅ Scalability – Handled large keyword datasets efficiently with MUI X’s performance optimizations. + ✅ Faster Development – Accelerated UI implementation across the platform. + + +## Results +By adopting MUI X, Moz achieved: + 🚀 Seamless data handling – Efficiently displayed and interacted with vast amounts of keyword data. + 📊 Enhanced customization – Developed custom filtering and column management features. + ⚡ Improved development experience – Standardized and simplified the UI-building process. + + +## Developer Experience & Documentation +Moz developers found MUI X’s documentation intuitive and in-depth, making customization straightforward. +💡 Pro Tip: “Read the docs thoroughly—there are many small examples that can greatly help with customization.” + +## Recommendation +Moz strongly recommends MUI X for developers working with large-scale, data-intensive applications. Its performance, flexibility, and ease of use make it a top choice for scalable UI development. +Moz unlocked new customization possibilities by leveraging the Data Grid API ref, allowing them to build highly customized components for filtering and column management—a game-changer for their keyword analysis platform. + +> “MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app.” + – Darko Cejkov, Front End Developer, Moz \ No newline at end of file diff --git a/docs/pages/blog/case-study-oregon.js b/docs/pages/blog/case-study-oregon.js new file mode 100644 index 00000000000000..51dbeb194fdc97 --- /dev/null +++ b/docs/pages/blog/case-study-oregon.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './case-study-oregon.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/case-study-oregon.md b/docs/pages/blog/case-study-oregon.md new file mode 100644 index 00000000000000..7216e9bcff7f11 --- /dev/null +++ b/docs/pages/blog/case-study-oregon.md @@ -0,0 +1,64 @@ +--- +title: Oregon State University +description: How Oregon State University Transformed Course Planning with MUI X’s Data Grid. +image: '/static/branding/companies/deloitte-light.svg' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- + + + + + +## How Oregon State University Transformed Course Planning with MUI X Data Grid + +***** + +Oregon State University is developing Resource Insights, an application aimed at improving course planning and faculty assignment. The project replaces outdated Excel-based methods with a modern online system that balances course sections, faculty availability, and student demand. The tool integrates with existing university systems to provide real-time enrollment data, eliminating manual data entry. Initial adoption is expected at around 30 users, with the potential to expand university-wide. + + +## Challenge +The university needed a robust solution to handle tabular data efficiently. Planners and administrators required a system that could provide spreadsheet-like interactions, allowing them to filter, sort, and manipulate data dynamically. + Key challenges included: +Lack of real-time data integration in current processes. +The need for an Excel-like experience in a web-based tool. +Finding a framework that was well-supported, actively maintained, and native to React. +Ensuring high performance and customization while keeping the UI intuitive. +While alternatives like AG Grid were considered, MUI X was preferred because it is deeply integrated with React, whereas AG Grid's approach spans multiple frameworks, leading to inconsistencies in React-specific implementations. + +## Solution +The team adopted MUI X’s Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: + ✅ Column manipulation – Moving, sorting, filtering, and grouping columns for enhanced usability. + ✅ Row grouping – Organizing complex datasets for better visualization. + ✅ Built-in editing – Allowing users to modify data directly within the grid. + ✅ Custom components – Integration of an autocomplete feature within cells to handle thousands of course options efficiently. +The Data Grid’s customization capabilities allowed the team to build an interface tailored to the university’s needs, providing a seamless transition from Excel while leveraging MUI’s robust React-native foundation. + +## Results +🚀 Faster and more intuitive workflows – Replacing spreadsheets with an interactive grid improved efficiency in faculty and course planning. + 📊 Custom editing interfaces – In-cell editing for simple data and modal-based forms for complex changes streamlined data management. + 🔗 Seamless system integration – Real-time enrollment data updates reduced manual input errors. + 🎯 Developer-friendly implementation – MUI X’s well-structured documentation and conventions enabled smooth adoption. + +## Recommendation +The Resource Insights team sees MUI X as a powerful tool for projects requiring complex tabular interactions. They believe more real-world examples in the documentation—such as integrating autocomplete in a data grid cell—would further enhance usability for advanced implementations. +Additionally, they expressed interest in future features like pivot tables, which would further support their data-heavy use case. + +> “MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it’s definitely worth considering.” – Mark Clements, Senior Development Team Lead + diff --git a/docs/pages/blog/dummy-case-study-two.md b/docs/pages/blog/dummy-case-study-two.md deleted file mode 100644 index e59409d532722d..00000000000000 --- a/docs/pages/blog/dummy-case-study-two.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Example case study -description: This is an example case study for the Customers page. -image: 'https://i.ibb.co/k3W3v7x/example-3.png' -date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] -tags: ['Case Study', 'Customer'] -manualCard: true ---- diff --git a/docs/pages/blog/dummy-case-study.md b/docs/pages/blog/dummy-case-study.md deleted file mode 100644 index e59409d532722d..00000000000000 --- a/docs/pages/blog/dummy-case-study.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Example case study -description: This is an example case study for the Customers page. -image: 'https://i.ibb.co/k3W3v7x/example-3.png' -date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] -tags: ['Case Study', 'Customer'] -manualCard: true ---- diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx index 53bc4fdcb8f2a5..f3e556b1523a40 100644 --- a/docs/pages/customers.tsx +++ b/docs/pages/customers.tsx @@ -12,7 +12,7 @@ import CustomersSpotlight from 'docs/src/components/customers/CustomersSpotlight import { getCaseStudies } from 'docs/lib/sourcing'; import { InferGetStaticPropsType } from 'next'; import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials'; -import CustomerLogos from 'docs/src/components/customers/CustomerLogos'; +// import CustomerLogos from 'docs/src/components/customers/CustomerLogos'; export const getStaticProps = () => { const customers = getCaseStudies(); @@ -43,8 +43,8 @@ export default function Customers(props: InferGetStaticPropsType - - + {/* + */} diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx index dbec49c5dd8f97..6a071d517c0105 100644 --- a/docs/src/components/customers/CustomersSpotlight.tsx +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -6,13 +6,15 @@ import { Link } from '@mui/docs/Link'; import Container from '@mui/material/Container'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Divider from '@mui/material/Divider'; +// import Divider from '@mui/material/Divider'; +import { useTheme } from '@mui/material/styles'; interface SpotlightProps { posts: BlogPost[]; } function Spotlight({ posts }: SpotlightProps) { + const theme = useTheme(); return ( {post.image && ( + > + Company Logo + )} - + {/* */} -

    {post.title}

    + {/*

    {post.title}

    */}

    {post.description}

     @@ -90,7 +100,7 @@ interface CustomersSpotlightProps { } export default function CustomersSpotlight({ customers }: CustomersSpotlightProps) { - const firstPosts = customers.slice(0, 2); + const firstPosts = customers.slice(0, 10); return ; } From 3c7859e2495dca047f89b3704be1812bd4b1ad79 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Thu, 17 Jul 2025 13:20:36 +0530 Subject: [PATCH 16/94] lint --- docs/pages/blog/case-study-athena.md | 28 +++++++------- docs/pages/blog/case-study-att.md | 18 +++++---- docs/pages/blog/case-study-cgi.md | 37 ++++++++++--------- docs/pages/blog/case-study-deliveryhero.md | 19 ++++++---- docs/pages/blog/case-study-johndeere.md | 19 ++++++---- docs/pages/blog/case-study-moz.md | 30 +++++++-------- docs/pages/blog/case-study-oregon.md | 32 ++++++++-------- .../customers/CustomersSpotlight.tsx | 14 ++++--- 8 files changed, 105 insertions(+), 92 deletions(-) diff --git a/docs/pages/blog/case-study-athena.md b/docs/pages/blog/case-study-athena.md index 138cb061ba30a5..e3b3fc541b3466 100644 --- a/docs/pages/blog/case-study-athena.md +++ b/docs/pages/blog/case-study-athena.md @@ -28,45 +28,43 @@ manualCard: true ## How Athena Intelligence Accelerated UI Development with MUI X -***** +--- Athena Intelligence provides Olympus, world's first AI-native analytics platform designed for seamless human-machine collaboration. Olympus empowers organizations to unlock the full potential of their data and drive intelligent decision-making. ## Challenge + Athena needed a customizable and performant UI framework to build their schema management interface, which required handling large datasets and ensuring a smooth user experience. ## Solution -To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X’s structured approach to UI development. Key benefits of using MUI X: -- Higher-level abstractions – Built on top of MUI (Material UI) for seamless integration. -- Faster iteration cycles – Simplified the development of complex UI components. -- Component-based architecture – Aligned perfectly with React’s ecosystem. -- Efficient code organization – Improved maintainability over inline styling methods like Tailwind. +To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X's structured approach to UI development. Key benefits of using MUI X: -## Solution -To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X’s structured approach to UI development. Key benefits of using MUI X: - Higher-level abstractions – Built on top of MUI (Material UI) for seamless integration. - Faster iteration cycles – Simplified the development of complex UI components. -- Component-based architecture – Aligned perfectly with React’s ecosystem. +- Component-based architecture – Aligned perfectly with React's ecosystem. - Efficient code organization – Improved maintainability over inline styling methods like Tailwind. ## Results + After integrating MUI X, Athena Intelligence saw: + - Increased development speed – Reducing time-to-market for complex UI features. - Improved UI consistency – A polished and cohesive experience across the platform. - Better performance & flexibility – Smooth, interactive data management without performance bottlenecks. - ## Developer Experience & Documentation -Athena Intelligence found MUI X’s documentation to be highly detailed and structured, making it easy to: + +Athena Intelligence found MUI X's documentation to be highly detailed and structured, making it easy to: + - Implement complex features like editing, selection, and customization. - Quickly onboard developers with clear, step-by-step guides. - Optimize the development process, accelerating feature rollouts. ## Recommendation + For developers looking to build complex, interactive UI components, Athena Intelligence highly recommends MUI X. Its deep customization options, seamless React integration, and structured documentation make it an excellent choice for UI-heavy applications. -A defining moment came when the team rapidly implemented direct asset renaming and customized components using MUI X. The ease of integration and instant improvements in interactivity and UI cohesion reinforced the framework’s powerful capabilities. -MUI X is now an essential tool in Athena Intelligence’s development stack, enabling rapid, scalable, and high-performance UI solutions. +A defining moment came when the team rapidly implemented direct asset renaming and customized components using MUI X. The ease of integration and instant improvements in interactivity and UI cohesion reinforced the framework's powerful capabilities. +MUI X is now an essential tool in Athena Intelligence's development stack, enabling rapid, scalable, and high-performance UI solutions. -> “MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure.” - – Brendon Geils, Founder, Athena Intelligence +> "MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure." – Brendon Geils, Founder, Athena Intelligence diff --git a/docs/pages/blog/case-study-att.md b/docs/pages/blog/case-study-att.md index 09bd9b7a8d3db9..384cbd54a2f0d3 100644 --- a/docs/pages/blog/case-study-att.md +++ b/docs/pages/blog/case-study-att.md @@ -28,7 +28,7 @@ manualCard: true ## How AT&T streamlined performance dashboards with MUI X -***** +--- AT&T, a leading global telecommunications company, develops advanced tools to enhance productivity and performance across its Retail and Call Center teams. Their internal applications, MyResults and MyCOACH, serve as key platforms for performance tracking and coaching within the organization. @@ -37,25 +37,27 @@ AT&T, a leading global telecommunications company, develops advanced tools to en They needed a highly customizable, efficient UI solution to help them deliver more consistent performance dashboards across their applications. They wanted to have a standard look and feel across their dashbaords and were looking for a solution that helps them build fast. ## Solution + To power MyResults and MyCOACH, AT&T integrated **MUI X Data Grid Premium**, leveraging its robust features and flexible customization options. Key benefits of using MUI X Data Grid: + - Faster development – Accelerated UI implementation across applications. -- Customizable UI – Adaptable components tailored to AT&T’s needs. +- Customizable UI – Adaptable components tailored to AT&T's needs. - Consistent design – Ensured a unified user experience across multiple tools. - ## Results + By integrating MUI X, AT&T achieved: + - Increased development efficiency – Faster deployment of dashboard features. - Improved UI consistency – A standardized, professional interface. - Enhanced customization – Greater flexibility in designing performance dashboards. - ## DevEx -AT&T’s developers found MUI X documentation to be clear and reliable, ensuring smooth implementation without issues. + +AT&T's developers found MUI X documentation to be clear and reliable, ensuring smooth implementation without issues. ## Recommendation -AT&T recommends MUI X for teams looking to build scalable, standardized, and customizable UI components. MUI X enabled seamless integration and customization, reinforcing its value as a go-to UI framework for AT&T’s internal tools. +AT&T recommends MUI X for teams looking to build scalable, standardized, and customizable UI components. MUI X enabled seamless integration and customization, reinforcing its value as a go-to UI framework for AT&T's internal tools. -> “MUI X has enabled us to develop faster and maintain standards across our multiple applications.” - – Bliss Keith, AT&T +> "MUI X has enabled us to develop faster and maintain standards across our multiple applications." – Bliss Keith, AT&T diff --git a/docs/pages/blog/case-study-cgi.md b/docs/pages/blog/case-study-cgi.md index 0a9ee62ca787a4..423c1d8b30503f 100644 --- a/docs/pages/blog/case-study-cgi.md +++ b/docs/pages/blog/case-study-cgi.md @@ -1,6 +1,6 @@ --- title: CGI -description: How CGI’s Techyon Project Enhanced Performance & Usability with MUI X. +description: How CGI's Techyon Project Enhanced Performance & Usability with MUI X. image: '/static/branding/companies/netflix.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,54 +26,55 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> +## How CGI's Techyon Project Enhanced Performance & Usability with MUI X -## How CGI’s Techyon Project Enhanced Performance & Usability with MUI X - -***** +--- CGI is a global leader in IT and business consulting, providing innovative digital solutions across various industries. Their Techyon project is dedicated to transforming the energy sector by integrating AI, machine learning, IoT, and cloud-based services to optimize internal operations and data flow. ## Challenge -As the energy sector undergoes rapid transformation, CGI needed a high-performance, scalable GUI to support Techyon’s advanced capabilities. Their key challenges included: + +As the energy sector undergoes rapid transformation, CGI needed a high-performance, scalable GUI to support Techyon's advanced capabilities. Their key challenges included: Performance Issues – Handling massive datasets (over 10 terawatts of data in Google Cloud) efficiently. Usability & Consistency – Creating an intuitive, user-friendly interface for energy operators and analysts. Slow Development Speed – Ensuring developers could quickly build and iterate on the UI. Developer Consistency – Standardizing the design approach across teams. - ## Solution -CGI adopted MUI X Premium Data Grid as the foundation for Techyon’s GUI, providing: + +CGI adopted MUI X Premium Data Grid as the foundation for Techyon's GUI, providing: + - A seamless, modern UI for managing workflows and energy data. - High-performance data handling, even with tens of thousands of rows displayed at once. - Structured, easy-to-use components, enabling developers to build interfaces effortlessly. - A consistent design system, ensuring a professional and unified look across the platform. ## Results + After implementing MUI X, the Techyon team experienced: + - Instant performance improvements – Large datasets loaded smoothly, eliminating lag. - A streamlined design process – Developers could create polished interfaces without needing a design background. -- Faster development cycles – MUI X’s well-documented components simplified UI implementation. - -> “MUI X helps our developers—who aren’t designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality.” +- Faster development cycles – MUI X's well-documented components simplified UI implementation. -> “When we switched to MUI X’s Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic.” -MUI X quickly became a go-to tool in Techyon’s stack, helping CGI deliver a high-performance, future-ready solution for the energy industry. - – Helge Andersen, Team Leader, CGI +> "MUI X helps our developers—who aren't designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality." +> "When we switched to MUI X's Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic. +> MUI X quickly became a go-to tool in Techyon's stack, helping CGI deliver a high-performance, future-ready solution for the energy industry." +> – Helge Andersen, Team Leader, CGI ## Developer Experience & Best Practices -CGI’s team found MUI X’s documentation to be clear, organized, and developer-friendly, making it easy for both new and experienced developers to integrate and optimize components. +CGI's team found MUI X's documentation to be clear, organized, and developer-friendly, making it easy for both new and experienced developers to integrate and optimize components. -Pro Tip from CGI: For developers handling large datasets, MUI X’s Data Grid is highly optimized, but profiling your UI and using pagination or lazy loading can further enhance performance. +Pro Tip from CGI: For developers handling large datasets, MUI X's Data Grid is highly optimized, but profiling your UI and using pagination or lazy loading can further enhance performance. ## Recommendation + For teams looking to build data-heavy applications efficiently, CGI highly recommends MUI X as a powerful, time-saving solution. Its advanced components (such as grids, filters, and tables) provide both flexibility and enterprise-grade performance. Before MUI X, the team struggled with performance bottlenecks when handling large datasets without pagination—leading to slow load times and poor user experience. + - Switching to MUI X Data Grid was a game-changer: - Instant data loading – No more sluggish UI. - Custom filtering & real-time adjustments – Meeting client needs with ease. - Scalability & flexibility – Adapting effortlessly to industry demands. - - - diff --git a/docs/pages/blog/case-study-deliveryhero.md b/docs/pages/blog/case-study-deliveryhero.md index 35c321df059552..da029e489ac278 100644 --- a/docs/pages/blog/case-study-deliveryhero.md +++ b/docs/pages/blog/case-study-deliveryhero.md @@ -28,35 +28,40 @@ manualCard: true ## How DeliveryHero Partner Portal Streamlined Development with MUI X -***** +--- DeliveryHero Partner Portal provides restaurant and local shop management solutions for the global food delivery market. Their platform equips vendors with the tools they need to manage operations efficiently, enhance customer experience, and optimize performance. ## Challenge + Before adopting MUI X, the DeliveryHero team faced two major challenges: + - Slow Development Speed – Building and refining UI components took too much time. - Usability & Consistency – Ensuring a seamless and intuitive experience for end-users was difficult. - ## Solution + To address these challenges, the team integrated MUI X Pro Date and Time Pickers and Data Grid Pro into their platform. These components enabled them to: + - Accelerate Development – Pre-built, high-quality components reduced time spent on UI implementation. - Enhance Usability – A modern, sleek UI improved user interactions and consistency. - Optimize Performance – The solution provided a smooth experience for restaurant and shop managers. - ## Results + After implementing MUI X, the team saw immediate benefits: + - Faster feature development with less effort. - Improved UI/UX consistency across the platform. - Reduced user clicks when interacting with date and time inputs. -> “By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort.” – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero - +> "By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort." – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero ## Documentation Experience & Feedback -The team also praised MUI X’s documentation, describing it as clear, well-structured, and easy to follow, which helped their developers integrate and customize components effortlessly. + +The team also praised MUI X's documentation, describing it as clear, well-structured, and easy to follow, which helped their developers integrate and customize components effortlessly. ## Recommendation + For developers looking to build modern, high-performance UI components with minimal effort, the DeliveryHero team highly recommends MUI X. -One key success story was the implementation of the Date Time Picker, which significantly reduced the number of clicks required for users to achieve their desired results. This simple enhancement greatly improved user efficiency and satisfaction. \ No newline at end of file +One key success story was the implementation of the Date Time Picker, which significantly reduced the number of clicks required for users to achieve their desired results. This simple enhancement greatly improved user efficiency and satisfaction. diff --git a/docs/pages/blog/case-study-johndeere.md b/docs/pages/blog/case-study-johndeere.md index 84bc0e0a62c173..d407f68834e1fe 100644 --- a/docs/pages/blog/case-study-johndeere.md +++ b/docs/pages/blog/case-study-johndeere.md @@ -28,28 +28,31 @@ manualCard: true ## How John Deere Standardized UI Development with MUI X -***** +--- John Deere is a global leader in agricultural, construction, and forestry machinery. With a strong emphasis on innovation, their teams build solutions that enhance efficiency and productivity across industries. ### Challenge + With multiple teams working towards different design goals, maintaining consistency for developers was a major challenge. John Deere needed a reliable, standardized component library to bridge the gaps in their internal design system. ## Solution -By integrating MUI X Premium Data Grid, John Deere’s teams found a baseline of standardized components to rely on, ensuring a cohesive development approach where their Fuel Design System didn’t provide the necessary coverage. + +By integrating MUI X Premium Data Grid, John Deere's teams found a baseline of standardized components to rely on, ensuring a cohesive development approach where their Fuel Design System didn't provide the necessary coverage. ## Results -✅ Improved Consistency – Developers could use MUI X as a standardized foundation across teams. - ✅ Faster Development – Teams saved time by leveraging ready-to-use, high-performance components. - ✅ Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. +✅ Improved Consistency – Developers could use MUI X as a standardized foundation across teams. +✅ Faster Development – Teams saved time by leveraging ready-to-use, high-performance components. +✅ Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. ## Documentation Experience & Feedback + While the MUI X documentation was useful, the team found it challenging to understand recent pricing changes and how to forecast costs for various groups using the tool. ## Recommendation -For developers working with John Deere’s Fuel Design System, MUI X is a great complement when additional features or components are needed. + +For developers working with John Deere's Fuel Design System, MUI X is a great complement when additional features or components are needed. A notable experiment involved testing heatmaps with their current key to determine the watermark for non-grandfathered functionality—an innovative approach to balancing licensing considerations with usability needs. -> “MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap.” - – Tyler Mitchell, Engineering Manager, John Deere \ No newline at end of file +> "MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap." – Tyler Mitchell, Engineering Manager, John Deere diff --git a/docs/pages/blog/case-study-moz.md b/docs/pages/blog/case-study-moz.md index 5d4f68a47b40ad..5b576f0797410b 100644 --- a/docs/pages/blog/case-study-moz.md +++ b/docs/pages/blog/case-study-moz.md @@ -28,7 +28,7 @@ manualCard: true ## How Moz Optimized Large-Scale Keyword Analysis with MUI X -***** +--- Moz, a leader in SEO software and analytics, provides powerful tools for keyword research, site audits, and rank tracking. To handle large-scale keyword analysis, Moz required a robust UI solution capable of managing massive datasets efficiently. The Challenge @@ -38,30 +38,30 @@ Customization – Flexible UI for filtering, sorting, and managing data. Consistency – A standardized development experience for its engineering team. Usability – A seamless user experience for navigating complex data grids. - ## Solution + To meet these challenges, Moz integrated MUI X Premium, leveraging its Data Grid and Date Picker components to create an optimized, interactive, and scalable UI. Key benefits of using MUI X: - ✅ Optimized DX & UX – A developer-friendly and intuitive user experience. - ✅ Advanced Customization – Built highly tailored components using Data Grid API refs. - ✅ Scalability – Handled large keyword datasets efficiently with MUI X’s performance optimizations. - ✅ Faster Development – Accelerated UI implementation across the platform. - +✅ Optimized DX & UX – A developer-friendly and intuitive user experience. +✅ Advanced Customization – Built highly tailored components using Data Grid API refs. +✅ Scalability – Handled large keyword datasets efficiently with MUI X's performance optimizations. +✅ Faster Development – Accelerated UI implementation across the platform. ## Results -By adopting MUI X, Moz achieved: - 🚀 Seamless data handling – Efficiently displayed and interacted with vast amounts of keyword data. - 📊 Enhanced customization – Developed custom filtering and column management features. - ⚡ Improved development experience – Standardized and simplified the UI-building process. +By adopting MUI X, Moz achieved: +🚀 Seamless data handling – Efficiently displayed and interacted with vast amounts of keyword data. +📊 Enhanced customization – Developed custom filtering and column management features. +⚡ Improved development experience – Standardized and simplified the UI-building process. ## Developer Experience & Documentation -Moz developers found MUI X’s documentation intuitive and in-depth, making customization straightforward. -💡 Pro Tip: “Read the docs thoroughly—there are many small examples that can greatly help with customization.” + +Moz developers found MUI X's documentation intuitive and in-depth, making customization straightforward. +💡 Pro Tip: "Read the docs thoroughly—there are many small examples that can greatly help with customization." ## Recommendation + Moz strongly recommends MUI X for developers working with large-scale, data-intensive applications. Its performance, flexibility, and ease of use make it a top choice for scalable UI development. Moz unlocked new customization possibilities by leveraging the Data Grid API ref, allowing them to build highly customized components for filtering and column management—a game-changer for their keyword analysis platform. -> “MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app.” - – Darko Cejkov, Front End Developer, Moz \ No newline at end of file +> "MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app." – Darko Cejkov, Front End Developer, Moz diff --git a/docs/pages/blog/case-study-oregon.md b/docs/pages/blog/case-study-oregon.md index 7216e9bcff7f11..2c2d7192467021 100644 --- a/docs/pages/blog/case-study-oregon.md +++ b/docs/pages/blog/case-study-oregon.md @@ -1,6 +1,6 @@ --- title: Oregon State University -description: How Oregon State University Transformed Course Planning with MUI X’s Data Grid. +description: How Oregon State University Transformed Course Planning with MUI X's Data Grid. image: '/static/branding/companies/deloitte-light.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -28,14 +28,14 @@ manualCard: true ## How Oregon State University Transformed Course Planning with MUI X Data Grid -***** +--- Oregon State University is developing Resource Insights, an application aimed at improving course planning and faculty assignment. The project replaces outdated Excel-based methods with a modern online system that balances course sections, faculty availability, and student demand. The tool integrates with existing university systems to provide real-time enrollment data, eliminating manual data entry. Initial adoption is expected at around 30 users, with the potential to expand university-wide. - ## Challenge + The university needed a robust solution to handle tabular data efficiently. Planners and administrators required a system that could provide spreadsheet-like interactions, allowing them to filter, sort, and manipulate data dynamically. - Key challenges included: +Key challenges included: Lack of real-time data integration in current processes. The need for an Excel-like experience in a web-based tool. Finding a framework that was well-supported, actively maintained, and native to React. @@ -43,22 +43,24 @@ Ensuring high performance and customization while keeping the UI intuitive. While alternatives like AG Grid were considered, MUI X was preferred because it is deeply integrated with React, whereas AG Grid's approach spans multiple frameworks, leading to inconsistencies in React-specific implementations. ## Solution -The team adopted MUI X’s Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: - ✅ Column manipulation – Moving, sorting, filtering, and grouping columns for enhanced usability. - ✅ Row grouping – Organizing complex datasets for better visualization. - ✅ Built-in editing – Allowing users to modify data directly within the grid. - ✅ Custom components – Integration of an autocomplete feature within cells to handle thousands of course options efficiently. -The Data Grid’s customization capabilities allowed the team to build an interface tailored to the university’s needs, providing a seamless transition from Excel while leveraging MUI’s robust React-native foundation. + +The team adopted MUI X's Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: +✅ Column manipulation – Moving, sorting, filtering, and grouping columns for enhanced usability. +✅ Row grouping – Organizing complex datasets for better visualization. +✅ Built-in editing – Allowing users to modify data directly within the grid. +✅ Custom components – Integration of an autocomplete feature within cells to handle thousands of course options efficiently. +The Data Grid's customization capabilities allowed the team to build an interface tailored to the university's needs, providing a seamless transition from Excel while leveraging MUI's robust React-native foundation. ## Results + 🚀 Faster and more intuitive workflows – Replacing spreadsheets with an interactive grid improved efficiency in faculty and course planning. - 📊 Custom editing interfaces – In-cell editing for simple data and modal-based forms for complex changes streamlined data management. - 🔗 Seamless system integration – Real-time enrollment data updates reduced manual input errors. - 🎯 Developer-friendly implementation – MUI X’s well-structured documentation and conventions enabled smooth adoption. +📊 Custom editing interfaces – In-cell editing for simple data and modal-based forms for complex changes streamlined data management. +🔗 Seamless system integration – Real-time enrollment data updates reduced manual input errors. +🎯 Developer-friendly implementation – MUI X's well-structured documentation and conventions enabled smooth adoption. ## Recommendation + The Resource Insights team sees MUI X as a powerful tool for projects requiring complex tabular interactions. They believe more real-world examples in the documentation—such as integrating autocomplete in a data grid cell—would further enhance usability for advanced implementations. Additionally, they expressed interest in future features like pivot tables, which would further support their data-heavy use case. -> “MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it’s definitely worth considering.” – Mark Clements, Senior Development Team Lead - +> "MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering." – Mark Clements, Senior Development Team Lead diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx index 6a071d517c0105..233eee2f638ac8 100644 --- a/docs/src/components/customers/CustomersSpotlight.tsx +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -34,15 +34,15 @@ function Spotlight({ posts }: SpotlightProps) { key={index} component="li" variant="outlined" - sx={(theme) => ({ + sx={(t) => ({ p: 2, display: 'flex', flexDirection: 'column', - backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + backgroundImage: (t.vars || t).palette.gradients.radioSubtle, boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', - ...theme.applyDarkStyles({ - background: (theme.vars || theme).palette.primaryDark[900], - backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + ...t.applyDarkStyles({ + background: (t.vars || t).palette.primaryDark[900], + backgroundImage: (t.vars || t).palette.gradients.radioSubtle, boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', }), })} @@ -64,7 +64,9 @@ function Spotlight({ posts }: SpotlightProps) { maxWidth: '100%', height: 'auto', }} - src={theme.palette.mode === 'dark' ? post.image.replace('light', 'dark') : post.image} + src={ + theme.palette.mode === 'dark' ? post.image.replace('light', 'dark') : post.image + } />     )} From bed8cb1a2ba10ef990f1d63842fe29efa6bf0bcf Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Mon, 21 Jul 2025 01:12:22 +0530 Subject: [PATCH 17/94] more --- docs/pages/blog/case-study-athena.md | 22 +++++++-------- docs/pages/blog/case-study-att.md | 16 +++++------ docs/pages/blog/case-study-cgi.md | 28 +++++++++--------- docs/pages/blog/case-study-deliveryhero.md | 18 ++++++------ docs/pages/blog/case-study-johndeere.md | 20 ++++++------- docs/pages/blog/case-study-moz.md | 33 +++++++++++----------- docs/pages/blog/case-study-oregon.md | 18 ++++++------ 7 files changed, 72 insertions(+), 83 deletions(-) diff --git a/docs/pages/blog/case-study-athena.md b/docs/pages/blog/case-study-athena.md index e3b3fc541b3466..84fd23090e92f7 100644 --- a/docs/pages/blog/case-study-athena.md +++ b/docs/pages/blog/case-study-athena.md @@ -1,6 +1,6 @@ --- title: Athena Intelligence -description: How Athena Intelligence Accelerated UI Development with MUI X. +description: How Athena Intelligence Accelerated UI Development with MUI X. image: '/static/branding/companies/amazon-light.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,9 +26,7 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> -## How Athena Intelligence Accelerated UI Development with MUI X - ---- +## How Athena Intelligence Accelerated UI Development with MUI X Athena Intelligence provides Olympus, world's first AI-native analytics platform designed for seamless human-machine collaboration. Olympus empowers organizations to unlock the full potential of their data and drive intelligent decision-making. @@ -38,16 +36,16 @@ Athena needed a customizable and performant UI framework to build their schema m ## Solution -To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X's structured approach to UI development. Key benefits of using MUI X: +To power their schema management interface, Athena Intelligence integrated MUI X Data Grid Premium and additional components like Tree View, leveraging MUI X's structured approach to UI development. Key benefits of using MUI X: -- Higher-level abstractions – Built on top of MUI (Material UI) for seamless integration. +- Higher-level abstractions – Built on top of MUI (Material UI) for seamless integration. - Faster iteration cycles – Simplified the development of complex UI components. - Component-based architecture – Aligned perfectly with React's ecosystem. - Efficient code organization – Improved maintainability over inline styling methods like Tailwind. ## Results -After integrating MUI X, Athena Intelligence saw: +After integrating MUI X, Athena Intelligence saw: - Increased development speed – Reducing time-to-market for complex UI features. - Improved UI consistency – A polished and cohesive experience across the platform. @@ -55,7 +53,7 @@ After integrating MUI X, Athena Intelligence saw: ## Developer Experience & Documentation -Athena Intelligence found MUI X's documentation to be highly detailed and structured, making it easy to: +Athena Intelligence found MUI X's documentation to be highly detailed and structured, making it easy to: - Implement complex features like editing, selection, and customization. - Quickly onboard developers with clear, step-by-step guides. @@ -63,8 +61,8 @@ Athena Intelligence found MUI X's documentation to be highly detailed and struct ## Recommendation -For developers looking to build complex, interactive UI components, Athena Intelligence highly recommends MUI X. Its deep customization options, seamless React integration, and structured documentation make it an excellent choice for UI-heavy applications. -A defining moment came when the team rapidly implemented direct asset renaming and customized components using MUI X. The ease of integration and instant improvements in interactivity and UI cohesion reinforced the framework's powerful capabilities. -MUI X is now an essential tool in Athena Intelligence's development stack, enabling rapid, scalable, and high-performance UI solutions. +For developers looking to build complex, interactive UI components, Athena Intelligence highly recommends MUI X. Its deep customization options, seamless React integration, and structured documentation make it an excellent choice for UI-heavy applications. +A defining moment came when the team rapidly implemented direct asset renaming and customized components using MUI X. The ease of integration and instant improvements in interactivity and UI cohesion reinforced the framework's powerful capabilities. +MUI X is now an essential tool in Athena Intelligence's development stack, enabling rapid, scalable, and high-performance UI solutions. -> "MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure." – Brendon Geils, Founder, Athena Intelligence +> "MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure." – Brendon Geils, Founder, Athena Intelligence diff --git a/docs/pages/blog/case-study-att.md b/docs/pages/blog/case-study-att.md index 384cbd54a2f0d3..f44e09041ba633 100644 --- a/docs/pages/blog/case-study-att.md +++ b/docs/pages/blog/case-study-att.md @@ -1,6 +1,6 @@ --- title: AT&T -description: How AT&T streamlined performance dashboards with MUI X. +description: How AT&T streamlined performance dashboards with MUI X. image: '/static/branding/companies/nasa.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,9 +26,7 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> -## How AT&T streamlined performance dashboards with MUI X - ---- +## How AT&T streamlined performance dashboards with MUI X AT&T, a leading global telecommunications company, develops advanced tools to enhance productivity and performance across its Retail and Call Center teams. Their internal applications, MyResults and MyCOACH, serve as key platforms for performance tracking and coaching within the organization. @@ -38,7 +36,7 @@ They needed a highly customizable, efficient UI solution to help them deliver mo ## Solution -To power MyResults and MyCOACH, AT&T integrated **MUI X Data Grid Premium**, leveraging its robust features and flexible customization options. Key benefits of using MUI X Data Grid: +To power MyResults and MyCOACH, AT&T integrated **MUI X Data Grid Premium**, leveraging its robust features and flexible customization options. Key benefits of using MUI X Data Grid: - Faster development – Accelerated UI implementation across applications. - Customizable UI – Adaptable components tailored to AT&T's needs. @@ -46,7 +44,7 @@ To power MyResults and MyCOACH, AT&T integrated **MUI X Data Grid Premium**, lev ## Results -By integrating MUI X, AT&T achieved: +By integrating MUI X, AT&T achieved: - Increased development efficiency – Faster deployment of dashboard features. - Improved UI consistency – A standardized, professional interface. @@ -54,10 +52,10 @@ By integrating MUI X, AT&T achieved: ## DevEx -AT&T's developers found MUI X documentation to be clear and reliable, ensuring smooth implementation without issues. +AT&T's developers found MUI X documentation to be clear and reliable, ensuring smooth implementation without issues. ## Recommendation -AT&T recommends MUI X for teams looking to build scalable, standardized, and customizable UI components. MUI X enabled seamless integration and customization, reinforcing its value as a go-to UI framework for AT&T's internal tools. +AT&T recommends MUI X for teams looking to build scalable, standardized, and customizable UI components. MUI X enabled seamless integration and customization, reinforcing its value as a go-to UI framework for AT&T's internal tools. -> "MUI X has enabled us to develop faster and maintain standards across our multiple applications." – Bliss Keith, AT&T +> "MUI X has enabled us to develop faster and maintain standards across our multiple applications." – Bliss Keith, AT&T diff --git a/docs/pages/blog/case-study-cgi.md b/docs/pages/blog/case-study-cgi.md index 423c1d8b30503f..ac845be714cafb 100644 --- a/docs/pages/blog/case-study-cgi.md +++ b/docs/pages/blog/case-study-cgi.md @@ -1,6 +1,6 @@ --- title: CGI -description: How CGI's Techyon Project Enhanced Performance & Usability with MUI X. +description: How CGI's Techyon Project Enhanced Performance & Usability with MUI X. image: '/static/branding/companies/netflix.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,9 +26,7 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> -## How CGI's Techyon Project Enhanced Performance & Usability with MUI X - ---- +## How CGI's Techyon Project Enhanced Performance & Usability with MUI X CGI is a global leader in IT and business consulting, providing innovative digital solutions across various industries. Their Techyon project is dedicated to transforming the energy sector by integrating AI, machine learning, IoT, and cloud-based services to optimize internal operations and data flow. @@ -42,7 +40,7 @@ Developer Consistency – Standardizing the design approach across teams. ## Solution -CGI adopted MUI X Premium Data Grid as the foundation for Techyon's GUI, providing: +CGI adopted MUI X Premium Data Grid as the foundation for Techyon's GUI, providing: - A seamless, modern UI for managing workflows and energy data. - High-performance data handling, even with tens of thousands of rows displayed at once. @@ -51,30 +49,30 @@ CGI adopted MUI X Premium Data Grid as the foundation for Techyon's GUI, providi ## Results -After implementing MUI X, the Techyon team experienced: +After implementing MUI X, the Techyon team experienced: - Instant performance improvements – Large datasets loaded smoothly, eliminating lag. - A streamlined design process – Developers could create polished interfaces without needing a design background. -- Faster development cycles – MUI X's well-documented components simplified UI implementation. +- Faster development cycles – MUI X's well-documented components simplified UI implementation. -> "MUI X helps our developers—who aren't designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality." +> "MUI X helps our developers—who aren't designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality." -> "When we switched to MUI X's Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic. -> MUI X quickly became a go-to tool in Techyon's stack, helping CGI deliver a high-performance, future-ready solution for the energy industry." +> "When we switched to MUI X's Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic. +> MUI X quickly became a go-to tool in Techyon's stack, helping CGI deliver a high-performance, future-ready solution for the energy industry." > – Helge Andersen, Team Leader, CGI ## Developer Experience & Best Practices -CGI's team found MUI X's documentation to be clear, organized, and developer-friendly, making it easy for both new and experienced developers to integrate and optimize components. +CGI's team found MUI X's documentation to be clear, organized, and developer-friendly, making it easy for both new and experienced developers to integrate and optimize components. -Pro Tip from CGI: For developers handling large datasets, MUI X's Data Grid is highly optimized, but profiling your UI and using pagination or lazy loading can further enhance performance. +Pro Tip from CGI: For developers handling large datasets, MUI X's Data Grid is highly optimized, but profiling your UI and using pagination or lazy loading can further enhance performance. ## Recommendation -For teams looking to build data-heavy applications efficiently, CGI highly recommends MUI X as a powerful, time-saving solution. Its advanced components (such as grids, filters, and tables) provide both flexibility and enterprise-grade performance. -Before MUI X, the team struggled with performance bottlenecks when handling large datasets without pagination—leading to slow load times and poor user experience. +For teams looking to build data-heavy applications efficiently, CGI highly recommends MUI X as a powerful, time-saving solution. Its advanced components (such as grids, filters, and tables) provide both flexibility and enterprise-grade performance. +Before MUI X, the team struggled with performance bottlenecks when handling large datasets without pagination—leading to slow load times and poor user experience. -- Switching to MUI X Data Grid was a game-changer: +- Switching to MUI X Data Grid was a game-changer: - Instant data loading – No more sluggish UI. - Custom filtering & real-time adjustments – Meeting client needs with ease. - Scalability & flexibility – Adapting effortlessly to industry demands. diff --git a/docs/pages/blog/case-study-deliveryhero.md b/docs/pages/blog/case-study-deliveryhero.md index da029e489ac278..a48c37d9c2c7f6 100644 --- a/docs/pages/blog/case-study-deliveryhero.md +++ b/docs/pages/blog/case-study-deliveryhero.md @@ -1,6 +1,6 @@ --- title: Delivery Hero -description: How DeliveryHero Partner Portal Streamlined Development with MUI X. +description: How DeliveryHero Partner Portal Streamlined Development with MUI X. image: '/static/branding/companies/volvo-light.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,22 +26,20 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> -## How DeliveryHero Partner Portal Streamlined Development with MUI X - ---- +## How DeliveryHero Partner Portal Streamlined Development with MUI X DeliveryHero Partner Portal provides restaurant and local shop management solutions for the global food delivery market. Their platform equips vendors with the tools they need to manage operations efficiently, enhance customer experience, and optimize performance. ## Challenge -Before adopting MUI X, the DeliveryHero team faced two major challenges: +Before adopting MUI X, the DeliveryHero team faced two major challenges: - Slow Development Speed – Building and refining UI components took too much time. - Usability & Consistency – Ensuring a seamless and intuitive experience for end-users was difficult. ## Solution -To address these challenges, the team integrated MUI X Pro Date and Time Pickers and Data Grid Pro into their platform. These components enabled them to: +To address these challenges, the team integrated MUI X Pro Date and Time Pickers and Data Grid Pro into their platform. These components enabled them to: - Accelerate Development – Pre-built, high-quality components reduced time spent on UI implementation. - Enhance Usability – A modern, sleek UI improved user interactions and consistency. @@ -49,19 +47,19 @@ To address these challenges, the team integrated MUI X Pro Date and Time Pickers ## Results -After implementing MUI X, the team saw immediate benefits: +After implementing MUI X, the team saw immediate benefits: - Faster feature development with less effort. - Improved UI/UX consistency across the platform. - Reduced user clicks when interacting with date and time inputs. -> "By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort." – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero +> "By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort." – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero ## Documentation Experience & Feedback -The team also praised MUI X's documentation, describing it as clear, well-structured, and easy to follow, which helped their developers integrate and customize components effortlessly. +The team also praised MUI X's documentation, describing it as clear, well-structured, and easy to follow, which helped their developers integrate and customize components effortlessly. ## Recommendation -For developers looking to build modern, high-performance UI components with minimal effort, the DeliveryHero team highly recommends MUI X. +For developers looking to build modern, high-performance UI components with minimal effort, the DeliveryHero team highly recommends MUI X. One key success story was the implementation of the Date Time Picker, which significantly reduced the number of clicks required for users to achieve their desired results. This simple enhancement greatly improved user efficiency and satisfaction. diff --git a/docs/pages/blog/case-study-johndeere.md b/docs/pages/blog/case-study-johndeere.md index d407f68834e1fe..4283565061662d 100644 --- a/docs/pages/blog/case-study-johndeere.md +++ b/docs/pages/blog/case-study-johndeere.md @@ -1,6 +1,6 @@ --- title: John Deere -description: How John Deere Standardized UI Development with MUI X. +description: How John Deere Standardized UI Development with MUI X. image: '/static/branding/companies/tesla-light.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,33 +26,31 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> -## How John Deere Standardized UI Development with MUI X - ---- +## How John Deere Standardized UI Development with MUI X John Deere is a global leader in agricultural, construction, and forestry machinery. With a strong emphasis on innovation, their teams build solutions that enhance efficiency and productivity across industries. -### Challenge +## Challenge With multiple teams working towards different design goals, maintaining consistency for developers was a major challenge. John Deere needed a reliable, standardized component library to bridge the gaps in their internal design system. ## Solution -By integrating MUI X Premium Data Grid, John Deere's teams found a baseline of standardized components to rely on, ensuring a cohesive development approach where their Fuel Design System didn't provide the necessary coverage. +By integrating MUI X Premium Data Grid, John Deere's teams found a baseline of standardized components to rely on, ensuring a cohesive development approach where their Fuel Design System didn't provide the necessary coverage. ## Results -✅ Improved Consistency – Developers could use MUI X as a standardized foundation across teams. +✅ Improved Consistency – Developers could use MUI X as a standardized foundation across teams. ✅ Faster Development – Teams saved time by leveraging ready-to-use, high-performance components. -✅ Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. +✅ Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. ## Documentation Experience & Feedback -While the MUI X documentation was useful, the team found it challenging to understand recent pricing changes and how to forecast costs for various groups using the tool. +While the MUI X documentation was useful, the team found it challenging to understand recent pricing changes and how to forecast costs for various groups using the tool. ## Recommendation -For developers working with John Deere's Fuel Design System, MUI X is a great complement when additional features or components are needed. +For developers working with John Deere's Fuel Design System, MUI X is a great complement when additional features or components are needed. A notable experiment involved testing heatmaps with their current key to determine the watermark for non-grandfathered functionality—an innovative approach to balancing licensing considerations with usability needs. -> "MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap." – Tyler Mitchell, Engineering Manager, John Deere +> "MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap." – Tyler Mitchell, Engineering Manager, John Deere diff --git a/docs/pages/blog/case-study-moz.md b/docs/pages/blog/case-study-moz.md index 5b576f0797410b..f54aceb46e9945 100644 --- a/docs/pages/blog/case-study-moz.md +++ b/docs/pages/blog/case-study-moz.md @@ -1,6 +1,6 @@ --- title: Moz -description: How Moz Optimized Large-Scale Keyword Analysis with MUI X. +description: How Moz Optimized Large-Scale Keyword Analysis with MUI X. image: '/static/branding/companies/ebay-light.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -26,42 +26,43 @@ manualCard: true style="width: 60%; object-fit: cover; object-position: center; border: 0px;" /> -## How Moz Optimized Large-Scale Keyword Analysis with MUI X - ---- +## How Moz Optimized Large-Scale Keyword Analysis with MUI X Moz, a leader in SEO software and analytics, provides powerful tools for keyword research, site audits, and rank tracking. To handle large-scale keyword analysis, Moz required a robust UI solution capable of managing massive datasets efficiently. -The Challenge + +## Challenge + Moz needed a UI framework that could handle: -Performance Optimization – Efficient rendering of large keyword datasets. -Customization – Flexible UI for filtering, sorting, and managing data. -Consistency – A standardized development experience for its engineering team. -Usability – A seamless user experience for navigating complex data grids. + +- Performance Optimization – Efficient rendering of large keyword datasets. +- Customization – Flexible UI for filtering, sorting, and managing data. +- Consistency – A standardized development experience for its engineering team. +- Usability – A seamless user experience for navigating complex data grids. ## Solution -To meet these challenges, Moz integrated MUI X Premium, leveraging its Data Grid and Date Picker components to create an optimized, interactive, and scalable UI. -Key benefits of using MUI X: +To meet these challenges, Moz integrated MUI X Premium, leveraging its Data Grid and Date Picker components to create an optimized, interactive, and scalable UI. +Key benefits of using MUI X: ✅ Optimized DX & UX – A developer-friendly and intuitive user experience. ✅ Advanced Customization – Built highly tailored components using Data Grid API refs. -✅ Scalability – Handled large keyword datasets efficiently with MUI X's performance optimizations. +✅ Scalability – Handled large keyword datasets efficiently with MUI X's performance optimizations. ✅ Faster Development – Accelerated UI implementation across the platform. ## Results -By adopting MUI X, Moz achieved: +By adopting MUI X, Moz achieved: 🚀 Seamless data handling – Efficiently displayed and interacted with vast amounts of keyword data. 📊 Enhanced customization – Developed custom filtering and column management features. ⚡ Improved development experience – Standardized and simplified the UI-building process. ## Developer Experience & Documentation -Moz developers found MUI X's documentation intuitive and in-depth, making customization straightforward. +Moz developers found MUI X's documentation intuitive and in-depth, making customization straightforward. 💡 Pro Tip: "Read the docs thoroughly—there are many small examples that can greatly help with customization." ## Recommendation -Moz strongly recommends MUI X for developers working with large-scale, data-intensive applications. Its performance, flexibility, and ease of use make it a top choice for scalable UI development. +Moz strongly recommends MUI X for developers working with large-scale, data-intensive applications. Its performance, flexibility, and ease of use make it a top choice for scalable UI development. Moz unlocked new customization possibilities by leveraging the Data Grid API ref, allowing them to build highly customized components for filtering and column management—a game-changer for their keyword analysis platform. -> "MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app." – Darko Cejkov, Front End Developer, Moz +> "MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app." – Darko Cejkov, Front End Developer, Moz diff --git a/docs/pages/blog/case-study-oregon.md b/docs/pages/blog/case-study-oregon.md index 2c2d7192467021..15c79fe0d82af2 100644 --- a/docs/pages/blog/case-study-oregon.md +++ b/docs/pages/blog/case-study-oregon.md @@ -1,6 +1,6 @@ --- title: Oregon State University -description: How Oregon State University Transformed Course Planning with MUI X's Data Grid. +description: How Oregon State University Transformed Course Planning with MUI X's Data Grid. image: '/static/branding/companies/deloitte-light.svg' date: 2022-06-08T00:00:00.000Z authors: ['oliviertassinari'] @@ -15,7 +15,7 @@ manualCard: true height: 167px; } } - +build -## How Oregon State University Transformed Course Planning with MUI X Data Grid - ---- +## How Oregon State University Transformed Course Planning with MUI X Data Grid Oregon State University is developing Resource Insights, an application aimed at improving course planning and faculty assignment. The project replaces outdated Excel-based methods with a modern online system that balances course sections, faculty availability, and student demand. The tool integrates with existing university systems to provide real-time enrollment data, eliminating manual data entry. Initial adoption is expected at around 30 users, with the potential to expand university-wide. @@ -40,11 +38,11 @@ Lack of real-time data integration in current processes. The need for an Excel-like experience in a web-based tool. Finding a framework that was well-supported, actively maintained, and native to React. Ensuring high performance and customization while keeping the UI intuitive. -While alternatives like AG Grid were considered, MUI X was preferred because it is deeply integrated with React, whereas AG Grid's approach spans multiple frameworks, leading to inconsistencies in React-specific implementations. +While alternatives like AG Grid were considered, MUI X was preferred because it is deeply integrated with React, whereas AG Grid's approach spans multiple frameworks, leading to inconsistencies in React-specific implementations. ## Solution -The team adopted MUI X's Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: +The team adopted MUI X's Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: ✅ Column manipulation – Moving, sorting, filtering, and grouping columns for enhanced usability. ✅ Row grouping – Organizing complex datasets for better visualization. ✅ Built-in editing – Allowing users to modify data directly within the grid. @@ -56,11 +54,11 @@ The Data Grid's customization capabilities allowed the team to build an interfac 🚀 Faster and more intuitive workflows – Replacing spreadsheets with an interactive grid improved efficiency in faculty and course planning. 📊 Custom editing interfaces – In-cell editing for simple data and modal-based forms for complex changes streamlined data management. 🔗 Seamless system integration – Real-time enrollment data updates reduced manual input errors. -🎯 Developer-friendly implementation – MUI X's well-structured documentation and conventions enabled smooth adoption. +🎯 Developer-friendly implementation – MUI X's well-structured documentation and conventions enabled smooth adoption. ## Recommendation -The Resource Insights team sees MUI X as a powerful tool for projects requiring complex tabular interactions. They believe more real-world examples in the documentation—such as integrating autocomplete in a data grid cell—would further enhance usability for advanced implementations. +The Resource Insights team sees MUI X as a powerful tool for projects requiring complex tabular interactions. They believe more real-world examples in the documentation—such as integrating autocomplete in a data grid cell—would further enhance usability for advanced implementations. Additionally, they expressed interest in future features like pivot tables, which would further support their data-heavy use case. -> "MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering." – Mark Clements, Senior Development Team Lead +> "MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering." – Mark Clements, Senior Development Team Lead From 9b28134e4fb8d170e14cf9e24cc6b1eec6a6dce5 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Fri, 8 Aug 2025 00:00:12 +0530 Subject: [PATCH 18/94] fixx --- docs/pages/blog/case-study-athena.js | 4 +- docs/pages/blog/case-study-athena.md | 46 +- docs/pages/blog/case-study-att.js | 4 +- docs/pages/blog/case-study-att.md | 48 +- docs/pages/blog/case-study-cgi.js | 4 +- docs/pages/blog/case-study-cgi.md | 54 +- docs/pages/blog/case-study-deliveryhero.js | 4 +- docs/pages/blog/case-study-deliveryhero.md | 45 +- docs/pages/blog/case-study-johndeere.js | 4 +- docs/pages/blog/case-study-johndeere.md | 44 +- docs/pages/blog/case-study-moz.js | 4 +- docs/pages/blog/case-study-moz.md | 57 ++- docs/pages/blog/case-study-oregon.js | 4 +- docs/pages/blog/case-study-oregon.md | 72 ++- docs/pages/customers.tsx | 2 +- docs/public/static/branding/companies/CGI.svg | 1 + .../static/branding/companies/athena-dark.png | Bin 0 -> 8321 bytes .../branding/companies/athena-light.png | Bin 0 -> 12259 bytes .../branding/companies/deliveryhero.svg | 1 + .../static/branding/companies/johndeere.svg | 1 + docs/public/static/branding/companies/moz.svg | 1 + .../static/branding/companies/oregon.svg | 1 + .../customers/CustomersSpotlight.tsx | 20 +- .../modules/components/TopLayoutCaseStudy.js | 467 ++++++++++++++++++ 24 files changed, 745 insertions(+), 143 deletions(-) create mode 100644 docs/public/static/branding/companies/CGI.svg create mode 100644 docs/public/static/branding/companies/athena-dark.png create mode 100644 docs/public/static/branding/companies/athena-light.png create mode 100644 docs/public/static/branding/companies/deliveryhero.svg create mode 100644 docs/public/static/branding/companies/johndeere.svg create mode 100644 docs/public/static/branding/companies/moz.svg create mode 100644 docs/public/static/branding/companies/oregon.svg create mode 100644 docs/src/modules/components/TopLayoutCaseStudy.js diff --git a/docs/pages/blog/case-study-athena.js b/docs/pages/blog/case-study-athena.js index da88969b475b27..bc821e1a8ba5bc 100644 --- a/docs/pages/blog/case-study-athena.js +++ b/docs/pages/blog/case-study-athena.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-athena.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-athena.md b/docs/pages/blog/case-study-athena.md index 84fd23090e92f7..8e0ed9e52e11bd 100644 --- a/docs/pages/blog/case-study-athena.md +++ b/docs/pages/blog/case-study-athena.md @@ -1,9 +1,8 @@ --- title: Athena Intelligence description: How Athena Intelligence Accelerated UI Development with MUI X. -image: '/static/branding/companies/amazon-light.svg' +image: '/static/branding/companies/athena-light.png' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- @@ -17,19 +16,48 @@ manualCard: true } + + + + + + +How Athena Intelligence Accelerated UI Development with MUI X. -## How Athena Intelligence Accelerated UI Development with MUI X +## Overview Athena Intelligence provides Olympus, world's first AI-native analytics platform designed for seamless human-machine collaboration. Olympus empowers organizations to unlock the full potential of their data and drive intelligent decision-making. + +
    + MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure. +
    + + – Brendon Geils, Founder, Athena Intelligence + +
    +     + +
    + MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure. +
    + + – Brendon Geils, Founder, Athena Intelligence + +
    +     + ## Challenge Athena needed a customizable and performant UI framework to build their schema management interface, which required handling large datasets and ensuring a smooth user experience. @@ -64,5 +92,3 @@ Athena Intelligence found MUI X's documentation to be highly detailed and struc For developers looking to build complex, interactive UI components, Athena Intelligence highly recommends MUI X. Its deep customization options, seamless React integration, and structured documentation make it an excellent choice for UI-heavy applications. A defining moment came when the team rapidly implemented direct asset renaming and customized components using MUI X. The ease of integration and instant improvements in interactivity and UI cohesion reinforced the framework's powerful capabilities. MUI X is now an essential tool in Athena Intelligence's development stack, enabling rapid, scalable, and high-performance UI solutions. - -> "MUI X enabled faster iteration for building complex UI components like data grids while fitting seamlessly into our existing MUI-based infrastructure." – Brendon Geils, Founder, Athena Intelligence diff --git a/docs/pages/blog/case-study-att.js b/docs/pages/blog/case-study-att.js index cd41ff1a5cd74b..be86244e5ec5a6 100644 --- a/docs/pages/blog/case-study-att.js +++ b/docs/pages/blog/case-study-att.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-att.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-att.md b/docs/pages/blog/case-study-att.md index f44e09041ba633..2bf484db4bf87b 100644 --- a/docs/pages/blog/case-study-att.md +++ b/docs/pages/blog/case-study-att.md @@ -1,9 +1,8 @@ --- title: AT&T -description: How AT&T streamlined performance dashboards with MUI X. -image: '/static/branding/companies/nasa.svg' +description: How AT&T streamlined performance dashboards with MUI X. +image: '/static/branding/companies/atandt-light.svg' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- @@ -17,19 +16,48 @@ manualCard: true } + + + + + + +How AT&T streamlined performance dashboards with MUI X -## How AT&T streamlined performance dashboards with MUI X +## Overview AT&T, a leading global telecommunications company, develops advanced tools to enhance productivity and performance across its Retail and Call Center teams. Their internal applications, MyResults and MyCOACH, serve as key platforms for performance tracking and coaching within the organization. + +
    + MUI X has enabled us to develop faster and maintain standards across our multiple applications. +
    + + – Bliss Keith, AT&T + +
    +     + +
    + MUI X has enabled us to develop faster and maintain standards across our multiple applications. +
    + + – Bliss Keith, AT&T + +
    +     + ## Challenge They needed a highly customizable, efficient UI solution to help them deliver more consistent performance dashboards across their applications. They wanted to have a standard look and feel across their dashbaords and were looking for a solution that helps them build fast. @@ -57,5 +85,3 @@ AT&T's developers found MUI X documentation to be clear and reliable, ensuring ## Recommendation AT&T recommends MUI X for teams looking to build scalable, standardized, and customizable UI components. MUI X enabled seamless integration and customization, reinforcing its value as a go-to UI framework for AT&T's internal tools. - -> "MUI X has enabled us to develop faster and maintain standards across our multiple applications." – Bliss Keith, AT&T diff --git a/docs/pages/blog/case-study-cgi.js b/docs/pages/blog/case-study-cgi.js index 1fe39bbe35d4fb..34a93c0585c590 100644 --- a/docs/pages/blog/case-study-cgi.js +++ b/docs/pages/blog/case-study-cgi.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-cgi.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-cgi.md b/docs/pages/blog/case-study-cgi.md index ac845be714cafb..da6b527c087f44 100644 --- a/docs/pages/blog/case-study-cgi.md +++ b/docs/pages/blog/case-study-cgi.md @@ -1,9 +1,8 @@ --- title: CGI -description: How CGI's Techyon Project Enhanced Performance & Usability with MUI X. -image: '/static/branding/companies/netflix.svg' +description: How CGI's Techyon Project Enhanced Performance & Usability with MUI X. +image: '/static/branding/companies/cgi.svg' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- @@ -19,24 +18,49 @@ manualCard: true -## How CGI's Techyon Project Enhanced Performance & Usability with MUI X +How CGI's Techyon Project Enhanced Performance & Usability with MUI X + +## Overview CGI is a global leader in IT and business consulting, providing innovative digital solutions across various industries. Their Techyon project is dedicated to transforming the energy sector by integrating AI, machine learning, IoT, and cloud-based services to optimize internal operations and data flow. + +
    + MUI X helps our developers—who aren't designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality. +
    +
    + When we switched to MUI X's Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic. MUI X quickly became a go-to tool in Techyon's stack, helping CGI deliver a high-performance, future-ready solution for the energy industry. +
    + + – Helge Andersen, Team Leader, CGI + +
    +     + +
    + MUI X helps our developers—who aren't designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality. +
    + When we switched to MUI X's Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic. MUI X quickly became a go-to tool in Techyon's stack, helping CGI deliver a high-performance, future-ready solution for the energy industry. +
    + + – Helge Andersen, Team Leader, CGI + +
    +     + ## Challenge As the energy sector undergoes rapid transformation, CGI needed a high-performance, scalable GUI to support Techyon's advanced capabilities. Their key challenges included: -Performance Issues – Handling massive datasets (over 10 terawatts of data in Google Cloud) efficiently. -Usability & Consistency – Creating an intuitive, user-friendly interface for energy operators and analysts. -Slow Development Speed – Ensuring developers could quickly build and iterate on the UI. -Developer Consistency – Standardizing the design approach across teams. + +- Performance Issues – Handling massive datasets (over 10 terawatts of data in Google Cloud) efficiently. +- Usability & Consistency – Creating an intuitive, user-friendly interface for energy operators and analysts. +- Slow Development Speed – Ensuring developers could quickly build and iterate on the UI. +- Developer Consistency – Standardizing the design approach across teams. ## Solution @@ -55,12 +79,6 @@ After implementing MUI X, the Techyon team experienced: - A streamlined design process – Developers could create polished interfaces without needing a design background. - Faster development cycles – MUI X's well-documented components simplified UI implementation. -> "MUI X helps our developers—who aren't designers—effortlessly create well-designed interfaces. The structured and strict nature of the components ensures a consistent development process, which is crucial for maintaining quality." - -> "When we switched to MUI X's Data Grid and fine-tuned it, the performance issues disappeared—it felt like pure magic. -> MUI X quickly became a go-to tool in Techyon's stack, helping CGI deliver a high-performance, future-ready solution for the energy industry." -> – Helge Andersen, Team Leader, CGI - ## Developer Experience & Best Practices CGI's team found MUI X's documentation to be clear, organized, and developer-friendly, making it easy for both new and experienced developers to integrate and optimize components. diff --git a/docs/pages/blog/case-study-deliveryhero.js b/docs/pages/blog/case-study-deliveryhero.js index d2354f6de4a7b6..6b8e446ee78c52 100644 --- a/docs/pages/blog/case-study-deliveryhero.js +++ b/docs/pages/blog/case-study-deliveryhero.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-deliveryhero.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-deliveryhero.md b/docs/pages/blog/case-study-deliveryhero.md index a48c37d9c2c7f6..5b725816b7ad40 100644 --- a/docs/pages/blog/case-study-deliveryhero.md +++ b/docs/pages/blog/case-study-deliveryhero.md @@ -1,35 +1,44 @@ --- title: Delivery Hero description: How DeliveryHero Partner Portal Streamlined Development with MUI X. -image: '/static/branding/companies/volvo-light.svg' +image: '/static/branding/companies/deliveryhero.svg' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- - - - -## How DeliveryHero Partner Portal Streamlined Development with MUI X +How DeliveryHero Partner Portal Streamlined Development with MUI X + +## Overview DeliveryHero Partner Portal provides restaurant and local shop management solutions for the global food delivery market. Their platform equips vendors with the tools they need to manage operations efficiently, enhance customer experience, and optimize performance. + +
    + By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort. +
    + + – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero + +
    +     + +
    + By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort. +
    + + – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero + +
    +     + ## Challenge Before adopting MUI X, the DeliveryHero team faced two major challenges: @@ -53,8 +62,6 @@ After implementing MUI X, the team saw immediate benefits: - Improved UI/UX consistency across the platform. - Reduced user clicks when interacting with date and time inputs. -> "By leveraging MUI X Date Time Picker and Data Grid Pro, we have been able to provide our customers with cutting-edge, well-designed features in a shorter development time and with less effort." – Ahmed Ibrahim, Senior Manager Software Engineering | Vendor Growth, Delivery Hero - ## Documentation Experience & Feedback The team also praised MUI X's documentation, describing it as clear, well-structured, and easy to follow, which helped their developers integrate and customize components effortlessly. diff --git a/docs/pages/blog/case-study-johndeere.js b/docs/pages/blog/case-study-johndeere.js index 8b42184fdea3ec..ffd3bfb740bfb3 100644 --- a/docs/pages/blog/case-study-johndeere.js +++ b/docs/pages/blog/case-study-johndeere.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-johndeere.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-johndeere.md b/docs/pages/blog/case-study-johndeere.md index 4283565061662d..1d914153158f37 100644 --- a/docs/pages/blog/case-study-johndeere.md +++ b/docs/pages/blog/case-study-johndeere.md @@ -1,9 +1,8 @@ --- title: John Deere -description: How John Deere Standardized UI Development with MUI X. -image: '/static/branding/companies/tesla-light.svg' +description: How John Deere Standardized UI Development with MUI X. +image: '/static/branding/companies/johndeere.svg' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- @@ -19,16 +18,35 @@ manualCard: true -## How John Deere Standardized UI Development with MUI X +How John Deere Standardized UI Development with MUI X -John Deere is a global leader in agricultural, construction, and forestry machinery. With a strong emphasis on innovation, their teams build solutions that enhance efficiency and productivity across industries. +## Overview + +John Deere is a global leader in agricultural, construction, and f sorestry machinery. With a strong emphasis on innovation, their teams build solutions that enhance efficiency and productivity across industries. + + +
    + MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap. +
    + + – Tyler Mitchell, Engineering Manager, John Deere + +
    +     + +
    + MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap. +
    + + – Tyler Mitchell, Engineering Manager, John Deere + +
    +     ## Challenge @@ -40,9 +58,9 @@ By integrating MUI X Premium Data Grid, John Deere's teams found a baseline of ## Results -✅ Improved Consistency – Developers could use MUI X as a standardized foundation across teams. -✅ Faster Development – Teams saved time by leveraging ready-to-use, high-performance components. -✅ Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. +- Improved Consistency – Developers could use MUI X as a standardized foundation across teams. +- Faster Development – Teams saved time by leveraging ready-to-use, high-performance components. +- Enhanced Flexibility – MUI X filled in the gaps where the internal design system fell short. ## Documentation Experience & Feedback @@ -52,5 +70,3 @@ While the MUI X documentation was useful, the team found it challenging to unde For developers working with John Deere's Fuel Design System, MUI X is a great complement when additional features or components are needed. A notable experiment involved testing heatmaps with their current key to determine the watermark for non-grandfathered functionality—an innovative approach to balancing licensing considerations with usability needs. - -> "MUI X has provided us with a baseline of standardized components to rely on where our design system may not necessarily fill a needed gap." – Tyler Mitchell, Engineering Manager, John Deere diff --git a/docs/pages/blog/case-study-moz.js b/docs/pages/blog/case-study-moz.js index 8547907ca1c1f0..47a40235a66abe 100644 --- a/docs/pages/blog/case-study-moz.js +++ b/docs/pages/blog/case-study-moz.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-moz.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-moz.md b/docs/pages/blog/case-study-moz.md index f54aceb46e9945..bf441540f5e254 100644 --- a/docs/pages/blog/case-study-moz.md +++ b/docs/pages/blog/case-study-moz.md @@ -1,9 +1,8 @@ --- title: Moz -description: How Moz Optimized Large-Scale Keyword Analysis with MUI X. -image: '/static/branding/companies/ebay-light.svg' +description: How Moz Optimized Large-Scale Keyword Analysis with MUI X. +image: '/static/branding/companies/moz.svg' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- @@ -19,17 +18,36 @@ manualCard: true -## How Moz Optimized Large-Scale Keyword Analysis with MUI X +How Moz Optimized Large-Scale Keyword Analysis with MUI X + +## Overview Moz, a leader in SEO software and analytics, provides powerful tools for keyword research, site audits, and rank tracking. To handle large-scale keyword analysis, Moz required a robust UI solution capable of managing massive datasets efficiently. + +
    + MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app. +
    + + – Darko Cejkov, Front End Developer, Moz + +
    +     + +
    + MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app. +
    + + – Darko Cejkov, Front End Developer, Moz + +
    +     + ## Challenge Moz needed a UI framework that could handle: @@ -41,19 +59,20 @@ Moz needed a UI framework that could handle: ## Solution -To meet these challenges, Moz integrated MUI X Premium, leveraging its Data Grid and Date Picker components to create an optimized, interactive, and scalable UI. -Key benefits of using MUI X: -✅ Optimized DX & UX – A developer-friendly and intuitive user experience. -✅ Advanced Customization – Built highly tailored components using Data Grid API refs. -✅ Scalability – Handled large keyword datasets efficiently with MUI X's performance optimizations. -✅ Faster Development – Accelerated UI implementation across the platform. +To meet these challenges, Moz integrated MUI X Premium, leveraging its Data Grid and Date Picker components to create an optimized, interactive, and scalable UI. Key benefits of using MUI X: + +- Optimized DX & UX – A developer-friendly and intuitive user experience. +- Advanced Customization – Built highly tailored components using Data Grid API refs. +- Scalability – Handled large keyword datasets efficiently with MUI X's performance optimizations. +- Faster Development – Accelerated UI implementation across the platform. ## Results -By adopting MUI X, Moz achieved: -🚀 Seamless data handling – Efficiently displayed and interacted with vast amounts of keyword data. -📊 Enhanced customization – Developed custom filtering and column management features. -⚡ Improved development experience – Standardized and simplified the UI-building process. +By adopting MUI X, Moz achieved: + +- Seamless data handling – Efficiently displayed and interacted with vast amounts of keyword data. +- Enhanced customization – Developed custom filtering and column management features. +- Improved development experience – Standardized and simplified the UI-building process. ## Developer Experience & Documentation @@ -64,5 +83,3 @@ Moz developers found MUI X's documentation intuitive and in-depth, making custo Moz strongly recommends MUI X for developers working with large-scale, data-intensive applications. Its performance, flexibility, and ease of use make it a top choice for scalable UI development. Moz unlocked new customization possibilities by leveraging the Data Grid API ref, allowing them to build highly customized components for filtering and column management—a game-changer for their keyword analysis platform. - -> "MUI X provides access to a very optimized and consistent DX and UX for a key portion of our app." – Darko Cejkov, Front End Developer, Moz diff --git a/docs/pages/blog/case-study-oregon.js b/docs/pages/blog/case-study-oregon.js index 51dbeb194fdc97..41f7124f89cea5 100644 --- a/docs/pages/blog/case-study-oregon.js +++ b/docs/pages/blog/case-study-oregon.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; import { docs } from './case-study-oregon.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/case-study-oregon.md b/docs/pages/blog/case-study-oregon.md index 15c79fe0d82af2..c90b9137d888b5 100644 --- a/docs/pages/blog/case-study-oregon.md +++ b/docs/pages/blog/case-study-oregon.md @@ -1,9 +1,8 @@ --- title: Oregon State University -description: How Oregon State University Transformed Course Planning with MUI X's Data Grid. -image: '/static/branding/companies/deloitte-light.svg' +description: How Oregon State University Transformed Course Planning with MUI X's Data Grid. +image: '/static/branding/companies/oregon.svg' date: 2022-06-08T00:00:00.000Z -authors: ['oliviertassinari'] tags: ['Case Study', 'Customer'] manualCard: true --- @@ -15,50 +14,69 @@ manualCard: true height: 167px; } } -build + -## How Oregon State University Transformed Course Planning with MUI X Data Grid +How Oregon State University Transformed Course Planning with MUI X Data Grid. + +## Overview Oregon State University is developing Resource Insights, an application aimed at improving course planning and faculty assignment. The project replaces outdated Excel-based methods with a modern online system that balances course sections, faculty availability, and student demand. The tool integrates with existing university systems to provide real-time enrollment data, eliminating manual data entry. Initial adoption is expected at around 30 users, with the potential to expand university-wide. + +
    + MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering. +
    + + – Mark Clements, Senior Development Team Lead + +
    +     + +
    + MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering. +
    + + – Mark Clements, Senior Development Team Lead + +
    +     + ## Challenge -The university needed a robust solution to handle tabular data efficiently. Planners and administrators required a system that could provide spreadsheet-like interactions, allowing them to filter, sort, and manipulate data dynamically. -Key challenges included: -Lack of real-time data integration in current processes. -The need for an Excel-like experience in a web-based tool. -Finding a framework that was well-supported, actively maintained, and native to React. -Ensuring high performance and customization while keeping the UI intuitive. -While alternatives like AG Grid were considered, MUI X was preferred because it is deeply integrated with React, whereas AG Grid's approach spans multiple frameworks, leading to inconsistencies in React-specific implementations. +The university needed a robust solution to handle tabular data efficiently. Planners and administrators required a system that could provide spreadsheet-like interactions, allowing them to filter, sort, and manipulate data dynamically. Key challenges included: + +- Lack of real-time data integration in current processes. +- The need for an Excel-like experience in a web-based tool. +- Finding a framework that was well-supported, actively maintained, and native to React. +- Ensuring high performance and customization while keeping the UI intuitive. +While alternatives like AG Grid were considered, MUI X was preferred because it is deeply integrated with React, whereas AG Grid's approach spans multiple frameworks, leading to inconsistencies in React-specific implementations. ## Solution -The team adopted MUI X's Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: -✅ Column manipulation – Moving, sorting, filtering, and grouping columns for enhanced usability. -✅ Row grouping – Organizing complex datasets for better visualization. -✅ Built-in editing – Allowing users to modify data directly within the grid. -✅ Custom components – Integration of an autocomplete feature within cells to handle thousands of course options efficiently. +The team adopted MUI X's Data Grid as the core component for handling tabular data. This choice was driven by its extensive feature set, including: + +- Column manipulation – Moving, sorting, filtering, and grouping columns for enhanced usability. +- Row grouping – Organizing complex datasets for better visualization. +- Built-in editing – Allowing users to modify data directly within the grid. +- Custom components – Integration of an autocomplete feature within cells to handle thousands of course options efficiently. + The Data Grid's customization capabilities allowed the team to build an interface tailored to the university's needs, providing a seamless transition from Excel while leveraging MUI's robust React-native foundation. ## Results -🚀 Faster and more intuitive workflows – Replacing spreadsheets with an interactive grid improved efficiency in faculty and course planning. -📊 Custom editing interfaces – In-cell editing for simple data and modal-based forms for complex changes streamlined data management. -🔗 Seamless system integration – Real-time enrollment data updates reduced manual input errors. -🎯 Developer-friendly implementation – MUI X's well-structured documentation and conventions enabled smooth adoption. +- Faster and more intuitive workflows – Replacing spreadsheets with an interactive grid improved efficiency in faculty and course planning. +- Custom editing interfaces – In-cell editing for simple data and modal-based forms for complex changes streamlined data management. +- Seamless system integration – Real-time enrollment data updates reduced manual input errors. +- Developer-friendly implementation – MUI X's well-structured documentation and conventions enabled smooth adoption. ## Recommendation The Resource Insights team sees MUI X as a powerful tool for projects requiring complex tabular interactions. They believe more real-world examples in the documentation—such as integrating autocomplete in a data grid cell—would further enhance usability for advanced implementations. Additionally, they expressed interest in future features like pivot tables, which would further support their data-heavy use case. - -> "MUI X provides the right balance of performance, customization, and React-native integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering." – Mark Clements, Senior Development Team Lead diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx index f3e556b1523a40..e9e9a67e453045 100644 --- a/docs/pages/customers.tsx +++ b/docs/pages/customers.tsx @@ -1,9 +1,9 @@ +import * as React from 'react'; import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; import CustomersHero from 'docs/src/components/customers/CustomersHero'; import AppHeader from 'docs/src/layouts/AppHeader'; import Head from 'docs/src/modules/components/Head'; -import * as React from 'react'; import Box from '@mui/material/Box'; import AppFooter from 'docs/src/layouts/AppFooter'; import HeroEnd from 'docs/src/components/home/HeroEnd'; diff --git a/docs/public/static/branding/companies/CGI.svg b/docs/public/static/branding/companies/CGI.svg new file mode 100644 index 00000000000000..6ec5acf4b2a90e --- /dev/null +++ b/docs/public/static/branding/companies/CGI.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/static/branding/companies/athena-dark.png b/docs/public/static/branding/companies/athena-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..24d11a6dd1c3490819b2badb223411586d32462f GIT binary patch literal 8321 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 W)(amP93qAWQ23zwzFfvMdelivery-hero-logo \ No newline at end of file diff --git a/docs/public/static/branding/companies/johndeere.svg b/docs/public/static/branding/companies/johndeere.svg new file mode 100644 index 00000000000000..b1d11d263e9333 --- /dev/null +++ b/docs/public/static/branding/companies/johndeere.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/static/branding/companies/moz.svg b/docs/public/static/branding/companies/moz.svg new file mode 100644 index 00000000000000..60d92f25587531 --- /dev/null +++ b/docs/public/static/branding/companies/moz.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/static/branding/companies/oregon.svg b/docs/public/static/branding/companies/oregon.svg new file mode 100644 index 00000000000000..1d7b36f108e3cc --- /dev/null +++ b/docs/public/static/branding/companies/oregon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx index 233eee2f638ac8..8831cd15f6f632 100644 --- a/docs/src/components/customers/CustomersSpotlight.tsx +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -5,16 +5,18 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import { Link } from '@mui/docs/Link'; import Container from '@mui/material/Container'; import Paper from '@mui/material/Paper'; +import { useColorScheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; // import Divider from '@mui/material/Divider'; -import { useTheme } from '@mui/material/styles'; + interface SpotlightProps { posts: BlogPost[]; } function Spotlight({ posts }: SpotlightProps) { - const theme = useTheme(); + const { mode } = useColorScheme(); + return ( - Company Logo )} diff --git a/docs/src/modules/components/TopLayoutCaseStudy.js b/docs/src/modules/components/TopLayoutCaseStudy.js new file mode 100644 index 00000000000000..bc68740a1d911b --- /dev/null +++ b/docs/src/modules/components/TopLayoutCaseStudy.js @@ -0,0 +1,467 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { styled, alpha } from '@mui/material/styles'; +import { useRouter } from 'next/router'; +import { exactProp } from '@mui/utils'; +import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; +import Divider from '@mui/material/Divider'; +// import Typography from '@mui/material/Typography'; +// import Avatar from '@mui/material/Avatar'; +import Head from 'docs/src/modules/components/Head'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import AppContainer from 'docs/src/modules/components/AppContainer'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; +import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement'; +import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; +import ROUTES from 'docs/src/route'; +import { Link } from '@mui/docs/Link'; + +// export const authors = { +// oliviertassinari: { +// name: 'Olivier Tassinari', +// avatar: 'https://avatars.githubusercontent.com/u/3165635', +// github: 'oliviertassinari', +// }, +// mbrookes: { +// name: 'Matt Brookes', +// avatar: 'https://avatars.githubusercontent.com/u/357702', +// github: 'mbrookes', +// }, +// eps1lon: { +// name: 'Sebastian Silbermann', +// avatar: 'https://avatars.githubusercontent.com/u/12292047', +// github: 'eps1lon', +// }, +// mnajdova: { +// name: 'Marija Najdova', +// avatar: 'https://avatars.githubusercontent.com/u/4512430', +// github: 'mnajdova', +// }, +// michaldudak: { +// name: 'Michał Dudak', +// avatar: 'https://avatars.githubusercontent.com/u/4696105', +// github: 'michaldudak', +// }, +// siriwatknp: { +// name: 'Siriwat Kunaporn', +// avatar: 'https://avatars.githubusercontent.com/u/18292247', +// github: 'siriwatknp', +// }, +// 'danilo-leal': { +// name: 'Danilo Leal', +// avatar: 'https://avatars.githubusercontent.com/u/67129314', +// github: 'danilo-leal', +// }, +// m4theushw: { +// name: 'Matheus Wichman', +// avatar: 'https://avatars.githubusercontent.com/u/42154031', +// github: 'm4theushw', +// }, +// flaviendelangle: { +// name: 'Flavien Delangle', +// avatar: 'https://avatars.githubusercontent.com/u/3309670', +// github: 'flaviendelangle', +// }, +// DanailH: { +// name: 'Danail Hadjiatanasov', +// avatar: 'https://avatars.githubusercontent.com/u/5858539', +// github: 'DanailH', +// }, +// alexfauquette: { +// name: 'Alexandre Fauquette', +// avatar: 'https://avatars.githubusercontent.com/u/45398769', +// github: 'alexfauquette', +// }, +// samuelsycamore: { +// name: 'Sam Sycamore', +// avatar: 'https://avatars.githubusercontent.com/u/71297412', +// github: 'samuelsycamore', +// }, +// josefreitas: { +// name: 'José Freitas', +// avatar: 'https://avatars.githubusercontent.com/u/550141', +// github: 'joserodolfofreitas', +// }, +// cherniavskii: { +// name: 'Andrew Cherniavskyi', +// avatar: 'https://avatars.githubusercontent.com/u/13808724', +// github: 'cherniavskii', +// }, +// mikailaread: { +// name: 'Mikaila Read', +// avatar: 'https://avatars.githubusercontent.com/u/76401606', +// github: 'mikailaread', +// }, +// prakhargupta: { +// name: 'Prakhar Gupta', +// avatar: 'https://avatars.githubusercontent.com/u/92228082', +// github: 'prakhargupta1', +// }, +// richbustos: { +// name: 'Rich Bustos', +// avatar: 'https://avatars.githubusercontent.com/u/92274722', +// github: 'richbustos', +// }, +// colmtuite: { +// name: 'Colm Tuite', +// avatar: 'https://avatars.githubusercontent.com/u/805073', +// github: 'colmtuite', +// }, +// diegoandai: { +// name: 'Diego Andai', +// avatar: 'https://avatars.githubusercontent.com/u/16889233', +// github: 'DiegoAndai', +// }, +// alelthomas: { +// name: 'Ale Thomas', +// avatar: 'https://avatars.githubusercontent.com/u/93217218', +// github: 'alelthomas', +// }, +// DavidCnoops: { +// name: 'David Cnoops', +// avatar: 'https://avatars.githubusercontent.com/u/28001064', +// github: 'DavidCnoops', +// }, +// brijeshb42: { +// name: 'Brijesh Bittu', +// avatar: 'https://avatars.githubusercontent.com/u/717550?', +// github: 'brijeshb42', +// }, +// aarongarciah: { +// name: 'Aarón García', +// avatar: 'https://avatars.githubusercontent.com/u/7225802?', +// github: 'aarongarciah', +// }, +// zanivan: { +// name: 'Victor Zanivan Monteiro', +// avatar: 'https://avatars.githubusercontent.com/u/37222944?', +// github: 'zanivan', +// }, +// romgrk: { +// name: 'Romain Gregoire', +// avatar: 'https://avatars.githubusercontent.com/u/1423607', +// github: 'romgrk', +// }, +// arminmeh: { +// name: 'Armin Mehinović', +// avatar: 'https://avatars.githubusercontent.com/u/4390250', +// github: 'arminmeh', +// }, +// janpot: { +// name: 'Jan Potoms', +// avatar: 'https://avatars.githubusercontent.com/u/2109932', +// github: 'Janpot', +// }, +// }; + +const classes = { + back: 'TopLayoutCaseStudy-back', + time: 'TopLayoutCaseStudy-time', + container: 'TopLayoutCaseStudy-container', +}; + +// Replicate the value used by https://medium.com/, a trusted reference. +const BLOG_MAX_WIDTH = 692; + +// const AuthorsContainer = styled('div')(({ theme }) => ({ +// display: 'flex', +// flexWrap: 'wrap', +// marginBottom: theme.spacing(2), +// '& .author': { +// display: 'flex', +// alignItems: 'center', +// paddingBottom: theme.spacing(2), +// paddingRight: theme.spacing(3), +// '& .MuiAvatar-root': { +// marginRight: theme.spacing(1), +// }, +// }, +// })); + +const Root = styled('div')( + ({ theme }) => ({ + flexGrow: 1, + background: `linear-gradient(180deg, ${ + (theme.vars || theme).palette.grey[50] + } 0%, #FFFFFF 100%)`, + backgroundSize: '100% 500px', + backgroundRepeat: 'no-repeat', + [`& .${classes.back}`]: { + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(2), + marginLeft: theme.spacing(-1), + }, + [`& .${classes.container}`]: { + paddingTop: 60 + 20, + marginBottom: theme.spacing(12), + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(2 * 2)})`, + [theme.breakpoints.up('md')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(3 * 2)})`, + }, + [theme.breakpoints.up('lg')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(8 * 2)})`, + }, + '& h1': { + marginBottom: theme.spacing(3), + }, + }, + '& .markdown-body': { + lineHeight: 1.7, + '& img, & video': { + border: '1px solid', + // Avoid border to change inline style width properties + boxSizing: 'content-box', + borderColor: (theme.vars || theme).palette.grey[200], + borderRadius: 8, + display: 'block', + margin: 'auto', + marginBottom: 16, + }, + '& figure': { + margin: 0, + padding: 0, + marginBottom: 16, + '& img, & video': { + marginBottom: 8, + }, + }, + '& figcaption': { + color: (theme.vars || theme).palette.text.tertiary, + fontSize: theme.typography.pxToRem(14), + textAlign: 'center', + }, + '& strong': { + color: (theme.vars || theme).palette.grey[900], + }, + '& summary': { + padding: 8, + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightMedium, + color: (theme.vars || theme).palette.grey[900], + }, + '& details': { + paddingLeft: 16, + paddingRight: 16, + background: alpha(theme.palette.grey[50], 0.5), + border: '1px solid', + borderRadius: 10, + borderColor: (theme.vars || theme).palette.grey[200], + transitionProperty: 'all', + transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '200ms', + '&:hover, &:focus-visible': { + background: (theme.vars || theme).palette.grey[50], + borderColor: (theme.vars || theme).palette.grey[300], + }, + }, + '& th': { + width: '100%', + textAlign: 'left', + borderBottom: `3px solid rgba(62, 80, 96, 0.2) !important`, + }, + '& .blog-description': { + fontSize: theme.typography.pxToRem(13), + marginTop: 8, + textAlign: 'center', + color: (theme.vars || theme).palette.grey[700], + '& a': { + color: 'inherit', + textDecoration: 'underline', + }, + }, + '& .MuiCode-root + .blog-description': { + marginTop: -20 + 8, + }, + }, + [`& .${classes.time}`]: { + color: (theme.vars || theme).palette.text.secondary, + ...theme.typography.caption, + fontWeight: 500, + }, + }), + ({ theme }) => + theme.applyDarkStyles({ + background: `linear-gradient(180deg, ${alpha(theme.palette.primary[900], 0.2)} 0%, ${ + (theme.vars || theme).palette.primaryDark[900] + } 100%)`, + backgroundSize: '100% 1000px', + backgroundRepeat: 'no-repeat', + '& .markdown-body': { + '& strong': { + color: (theme.vars || theme).palette.grey[100], + }, + '& summary': { + color: (theme.vars || theme).palette.grey[300], + }, + '& img, & video': { + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + }, + '& details': { + background: alpha(theme.palette.primary[900], 0.3), + borderColor: (theme.vars || theme).palette.primaryDark[700], + '&:hover, &:focus-visible': { + background: alpha(theme.palette.primary[900], 0.4), + borderColor: (theme.vars || theme).palette.primaryDark[500], + }, + }, + '& .blog-description': { + color: (theme.vars || theme).palette.grey[500], + }, + }, + }), +); + +export default function TopLayoutCaseStudy(props) { + const { className, docs, demos, demoComponents, srcComponents } = props; + const { description, rendered, title, headers } = docs.en; + const finalTitle = title || headers.title; + const router = useRouter(); + const slug = router.pathname.replace(/(.*)\/(.*)/, '$2'); + const { canonicalAsServer } = pathnameToLanguage(router.asPath); + const card = `/static/blog/${slug}/card.png` + + + if (process.env.NODE_ENV !== 'production') { + if (headers.manualCard === undefined) { + throw new Error( + [ + `MUI: the "manualCard" markdown header for the blog post "${slug}" is missing.`, + `Set manualCard: true or manualCard: false header in docs/pages/blog/${slug}.md.`, + ].join('\n'), + ); + } + } + + return ( + + + + {/* authors[key].name).join(', ')} /> */} + {/* */} +