mui · alelthomas · Dec 18, 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,102 @@
+---
+title: Athena Intelligence
+description: How Athena Intelligence accelerated UI development with MUI X.
+image: '/static/branding/companies/athena-light.png'
+rank: '9'
+tags: ['MUI X']
+manualCard: true
+---
+
+<style>
+  #blog-responsive-image {
+    height: 230px;
+    @media (max-width: 600px) {
+      height: 167px;
+    }
+  }
+  blockquote::before {
+    content: none;
+  }
+</style>
+
+<span class="only-light-mode">
+<img
+  id="blog-responsive-image-light"
+  src="/static/branding/companies/athena-light.png"
+  alt="Athena logo"
+  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="Athena logo"
+    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 an AI-native analytics platform designed for enterprises. Athena Olympus 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 components 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 components 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 library to build their schema management interface, which required handling large datasets and ensuring a smooth UX.
+
+## Solution
+
+To power their schema management interface, Athena integrated the Data Grid 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 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 library'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,78 @@
+---
+title: AT&T
+description: Streamlining development workflows for internal tools.
+image: '/static/branding/companies/atnt_spotlight.svg'
+tags: ['MUI X']
+rank: '4'
+manualCard: true
+---
+
+<style>
+  #blog-responsive-image {
+    height: 230px;
+    @media (max-width: 600px) {
+      height: 167px;
+    }
+  }
+  blockquote::before {
+    content: none;
+  }
+</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.
-Their internal applications, MyResults and MyCOACH, serve as key platforms for performance tracking and coaching within the organization.
+Their internal applications—MyResults and MyCOACH—serve as key platforms for performance tracking and coaching within the organization.
-Their internal applications, MyResults and MyCOACH, serve as key platforms for performance tracking and coaching within the organization.
+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
+
+AT&T 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 dashboards and were looking for a solution that would accelerate their development speed.
+
+## Solution
+
+To power MyResults and MyCOACH, AT&T integrated the Data Grid, leveraging its robust features and flexible customization options.
+Key benefits of using the Data Grid included:
+
+- The technical team's productivity improved, as leveraging the Data Grid enabled them to build better applications, faster.
+- The team could customize the component to meet their use case. For one of their apps that includes many columns, the column pinning feature was crucial to delivering a good UX.
+- The team liked how the components work immediately with minimal configuration.
+
+## Results
+
+By integrating MUI X, AT&T achieved:
+
+- Increased development speed ensuring faster feature delivery, enabling them 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. They found that MUI X integrated easily with other popular React libraries, reinforcing its value as the go-to UI library 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} />;
+}