mui · prakhargupta1 · Mar 25, 2025 · Mar 25, 2025 · Mar 25, 2025 · Mar 25, 2025
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
@@ -8,6 +8,12 @@ export const getBlogFilePaths = (ext = '.md') => {
   return fs.readdirSync(blogDir).filter((file) => file.endsWith(ext));
 };
 
+const caseStudyDir = path.join(process.cwd(), 'pages/customers');
+
+export const getCaseStudyFilePaths = (ext = '.md') => {
+  return fs.readdirSync(caseStudyDir).filter((file) => file.endsWith(ext));
+};
+
 export interface BlogPost {
   slug: string;
   title: string;
@@ -16,6 +22,7 @@ export interface BlogPost {
   tags: Array<string>;
   authors?: Array<string>;
   date?: string;
+  rank?: string;
 }
 
 export function getBlogPost(filePath: string): BlogPost {
@@ -30,6 +37,18 @@ export function getBlogPost(filePath: string): BlogPost {
   };
 }
 
+export function getCaseStudyPost(filePath: string): BlogPost {
+  const slug = filePath.replace(/\.md$/, '');
+  const content = fs.readFileSync(path.join(caseStudyDir, filePath), 'utf-8');
+
+  const headers = getHeaders(content) as unknown as BlogPost;
+
+  return {
+    ...headers,
+    slug,
+  };
+}
+
 // Avoid typos in the blog markdown pages.
 // https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917
 const ALLOWED_TAGS = [
@@ -79,3 +98,11 @@ export const getAllBlogPosts = () => {
     tagInfo,
   };
 };
+
+export const getCaseStudies = () => {
+  const filePaths = getCaseStudyFilePaths();
+
+  const caseStudies = filePaths.map((name) => getCaseStudyPost(name));
+
+  return caseStudies;
+};
diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx
@@ -0,0 +1,55 @@
+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 Box from '@mui/material/Box';
+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 CustomersLogoSlider from 'docs/src/components/customers/CustomersLogoSlider';
+import { getCaseStudies } from 'docs/lib/sourcing';
+import { InferGetStaticPropsType } from 'next';
+import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials';
+
+export const getStaticProps = () => {
+  const customers = getCaseStudies();
+  return {
+    props: {
+      customers,
+    },
+  };
+};
+
+export default function Customers(props: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <BrandingCssVarsProvider>
+      <Head title="Customers - MUI" description="Meet the teams powered by MUI" />
+      <AppHeaderBanner />
+      <AppHeader />
+      <Divider />
+      <main id="main-content">
+        <CustomersHero />
+        <CustomersLogoSlider />
+        <Box
+          component="ul"
+          sx={{
+            display: 'grid',
+            m: 0,
+            p: 0,
+            gap: 2,
+          }}
+        >
+          <CustomersSpotlight customers={props.customers} />
+        </Box>
+        <CustomersTestimonials />
+        <Divider />
+        <HeroEnd />
+        <Divider />
+      </main>
+      <AppFooter />
+    </BrandingCssVarsProvider>
+  );
+}
diff --git a/docs/pages/customers/athena.js b/docs/pages/customers/athena.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy';
+import { docs } from './athena.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutCaseStudy docs={docs} />;
+}
diff --git a/docs/pages/customers/athena.md b/docs/pages/customers/athena.md
@@ -0,0 +1,100 @@
+---
+title: Athena Intelligence
+description: How Athena Intelligence accelerated UI development with MUI X.
+image: 'https://deploy-preview-46416--material-ui.netlify.app/static/branding/companies/athena-light.png'
+date: 2022-06-08T00:00:00.000Z
+rank: '9'
+tags: ['MUI X']
+manualCard: true
+---
+
+<style>
+  #blog-responsive-image {
+    height: 230px;
+    @media (max-width: 600px) {
+      height: 167px;
+    }
+  }
+</style>
+
+<span class="only-light-mode">
+<img
+  id="blog-responsive-image-light"
+  src="/static/branding/companies/athena-light.png"
+  alt=""
+  style="width: 40%; height: auto; object-fit: cover; object-position: top left; border: 0px; margin-left: 0; margin-bottom: 20px; display: block; text-align: left;"
+/>
+</span>
+<span class="only-dark-mode">
+<img
+    id="blog-responsive-image-dark"
+    src="/static/branding/companies/athena-dark.png"
+    alt=""
+    style="width: 40%; height: auto; object-fit: cover; object-position: top left; border: 0px; margin-left: 0; margin-bottom: 20px; display: block; text-align: left;"
+  />
+</span>
+
+**Partner Since: 2023**
+
+## Overview
+
+[Athena Intelligence](https://www.athenaintel.com/) has developed a AI-native analytics platforms designed for enterprises. Athena automates labor-intensive data analysis tasks, allowing human analysts to focus on strategic decision-making.
+
+<span class="only-light-mode">
+<blockquote style="margin: 32px 0; padding: 24px 32px; background: #f5f5f7; border-left: 6px solid var(--muidocs-palette-primary-main); border-radius: 8px; font-size: 1.15rem; font-style: italic;">
+  We started using MUI from day one to provide a wide range of UIs that support data workflows for enterprise teams. MUI X enabled us to iterate faster by offering complex UI components like data grids.
+  <br>
+  <span style="display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: #555; font-weight: 500;">
+    – <a href="https://www.linkedin.com/in/brendongeils/" target="_blank" rel="noopener">Brendon Geils</a>, Founder & CEO
+  </span>
+</blockquote>
+</span>
+<span class="only-dark-mode">
+<blockquote style="margin: 32px 0; padding: 24px 32px; background: var(--muidocs-palette-background-default); border-left: 6px solid var(--muidocs-palette-primary-main); color: #f5f5f7; border-radius: 8px; font-size: 1.15rem; font-style: italic;">
+  We started using MUI from day one to provide a wide range of UIs that support data workflows for enterprise teams. MUI X enabled us to iterate faster by offering complex UI components like data grids.
+  <br>
+  <span style="display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: #bbb; font-weight: 500;">
+    – <a href="https://www.linkedin.com/in/brendongeils/" target="_blank" rel="noopener">Brendon Geils</a>, Founder & CEO
+  </span>
+</blockquote>
+</span>
+
+## 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 integrated the **Data Grid Premium** and the **Tree View**, leveraging MUI X's structured approach to UI development.
+Key benefits of using MUI X included:
+
+- 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 CSS.
+
+<img
+  id="athena-ui"
+  src="/static/branding/companies/athena-ui.png"
+  alt=""
+  style="width: 100%; height: auto; object-fit: cover; object-position: top left; border: 0px; margin-left: 0; margin-bottom: 20px; display: block; text-align: left;"
+/>
+
+In the image above from Athena's platform, the Tree View in the first column neatly organizes the assets, while the customized and responsive Data Grid in the third column shows query output in a tabular form.
+
+## Results
+
+After integrating MUI X, Athena 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 and flexibility – Smooth, interactive data management without performance bottlenecks.
+
+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.
+
+## Developer experience
+
+Athena found the MUI documentation to be highly detailed, structured and clear. The step-by-step guides helped them implement complex features like cell editing, selection, and customization easily. Developers additionally liked the seamless React integration as it helped them optimize the development process, accelerating feature rollouts and overall delivery speed.
+
+MUI X is now an essential tool in Athena's development stack, enabling rapid, scalable, and high-performance UI solutions.
diff --git a/docs/pages/customers/att.js b/docs/pages/customers/att.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy';
+import { docs } from './att.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutCaseStudy docs={docs} />;
+}
diff --git a/docs/pages/customers/att.md b/docs/pages/customers/att.md
@@ -0,0 +1,76 @@
+---
+title: AT&T
+description: Streamlining development workflows for internal tools.
+image: '/static/branding/companies/atnt_spotlight.svg'
+date: 2022-06-08T00:00:00.000Z
+tags: ['MUI X']
+rank: '4'
+manualCard: true
+---
+
+<style>
+  #blog-responsive-image {
+    height: 230px;
+    @media (max-width: 600px) {
+      height: 167px;
+    }
+  }
+</style>
+
+# AT&T | Streamlining development workflows for internal tools
+
+<img
+  id="blog-responsive-image"
+  src="/static/branding/companies/headers/atnt-header.png"
+  alt="AT&T logo"
+  style="width: 100%; height: auto; object-fit: cover; object-position: top left; border: 0px; margin-left: 0; margin-bottom: 20px; display: block; text-align: left;"
+/>
+
+## Overview
+
+[AT&T](https://www.att.com/), 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.
+
+<span class="only-light-mode">
+<blockquote style="margin: 32px 0; padding: 24px 32px; background: #f5f5f7; border-left: 6px solid var(--muidocs-palette-primary-main); border-radius: 8px; font-size: 1.15rem; font-style: italic;">
+  MUI X has enabled us to develop faster and maintain standards across our multiple applications.
+  <br>
+  <span style="display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: #555; font-weight: 500;">
+    – <a href="https://www.linkedin.com/in/blisskeith/" target="_blank" rel="noopener">Bliss Keith</a>, Principal Scrum Master
+  </span>
+</blockquote>
+</span>
+<span class="only-dark-mode">
+<blockquote style="margin: 32px 0; padding: 24px 32px; background: var(--muidocs-palette-background-default); border-left: 6px solid var(--muidocs-palette-primary-main); color: #f5f5f7; border-radius: 8px; font-size: 1.15rem; font-style: italic;">
+  MUI X has enabled us to develop faster and maintain standards across our multiple applications.
+  <br>
+  <span style="display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: #bbb; font-weight: 500;">
+    – <a href="https://www.linkedin.com/in/blisskeith/" target="_blank" rel="noopener">Bliss Keith</a>, Principal Scrum Master
+  </span>
+</blockquote>
+</span>
+
+## 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 the **MUI X Data Grid Premium**, leveraging its robust features and flexible customization options.
+Key benefits of using the Data Grid included:
+
+- The technical team could output more as leveraging MUI X Data Grid Premium enabled them to build applications faster.
+- The team could customize the component to meet their use case. For one of their apps, that had lots of columns, the column pinning feature proved to be helpful to deliver a good UX.
+- They team liked how the components work immediately with minimal configuration.
+
+## Results
+
+By integrating MUI X, AT&T achieved:
+
+- Increased development speed ensured faster feature delivery, enabling the management move to a more agile process.
+- A consistent looking interface across all applications improved the overall UX, enabling internal users to focus on their core tasks.
+
+## Developer experience
+
+AT&T's developers found the MUI documentation to be clear and reliable, ensuring smooth implementation without issues. MUI X being React focussed enabled integrating with other React libraries easy, reinforcing its value as the go-to UI framework for AT&T's internal applications.
diff --git a/docs/pages/customers/cgi.js b/docs/pages/customers/cgi.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy';
+import { docs } from './cgi.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutCaseStudy docs={docs} />;
+}
diff --git a/docs/pages/customers/cgi.md b/docs/pages/customers/cgi.md
@@ -0,0 +1,89 @@
+---
+title: CGI
+description: How CGI's Techyon Project enhanced performance and usability with MUI X.
+image: '/static/branding/companies/cgi_spotlight.svg'
+date: 2022-06-08T00:00:00.000Z
+tags: ['MUI X']
+rank: '5'
+manualCard: true
+---
+
+<style>
+  #blog-responsive-image {
+    height: 230px;
+    @media (max-width: 600px) {
+      height: 167px;
+    }
+  }
+</style>
+
+# How CGI's Techyon Project enhanced performance and usability with MUI X
+
+<img
+    id="blog-responsive-image"
+    src="/static/branding/companies/headers/cgi-header.png"
+    alt="CGI logo"
+    style="width: 100%; height: auto; object-fit: cover; object-position: top left; border: 0px; margin-left: 0; margin-bottom: 20px; display: block; text-align: left;"
+  />
+
+## Overview
+
+[CGI](https://www.cgi.com/) 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.
+
+<span class="only-light-mode">
+<blockquote style="margin: 32px 0; padding: 24px 32px; background: #f5f5f7; border-left: 6px solid var(--muidocs-palette-primary-main); border-radius: 8px; font-size: 1 rem; font-style: italic;">
+  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.
+  <br>
+  <br>
+  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.
+  <br>
+  <span style="display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: #555; font-weight: 500;">
+    – Helge Andersen, Team Lead
+  </span>
+</blockquote>
+</span>
+<span class="only-dark-mode">
+<blockquote style="margin: 32px 0; padding: 24px 32px; background: var(--muidocs-palette-background-default); border-left: 6px solid var(--muidocs-palette-primary-main); color: #f5f5f7; border-radius: 8px; font-size: 1 rem; font-style: italic;">
+  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.
+  <br>
+  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.
+  <br>
+  <span style="display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: #bbb; font-weight: 500;">
+    – Helge Andersen, Team Lead
+  </span>
+</blockquote>
+</span>
+
+## Challenge
+
+As the energy sector was undergoing rapid transformation, CGI needed a high-performance, scalable GUI to support Techyon's advanced capabilities.
+Their key challenges included:
+
+- Performance bottlenecks as handling massive data from their Google Cloud without pagination led to slow load times and poor user experience.
+- Creating an intuitive, consistent, and user-friendly interface for energy operators and analysts.
+- Ensuring developers can quickly build and iterate without wasting time about the unnecessary UI issues.
+
+## Solution
+
+CGI adopted the **MUI X Data Grid Premium** 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 no more sluggish UI, instant data loading as large datasets loaded smoothly, eliminating lag. A streamlined design process that enabled their developers to create polished interfaces without needing a design background. MUI X's well-documented components simplified UI implementation and helped them achieve faster development cycles.
+
+## Developer experience
+
+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 use components.
+
+:::info
+Pro tip from CGI: For developers handling large datasets, MUI X's Data Grid is highly optimized out of the box, but profiling your UI and using pagination or lazy loading can further enhance performance.
+:::
+
+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.