mui · alelthomas · Mar 25, 2025 · Mar 25, 2025 · Mar 25, 2025 · Mar 25, 2025
diff --git 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/blog/dummy-case-study-two.js 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 <TopLayoutBlog docs={docs} />;
+}
diff --git a/docs/pages/blog/dummy-case-study-two.md 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
@@ -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 <TopLayoutBlog docs={docs} />;
+}
diff --git a/docs/pages/blog/dummy-case-study.md 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
+---
diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx
@@ -0,0 +1,57 @@
+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';
+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<typeof getStaticProps>) {
+  return (
+    <BrandingCssVarsProvider>
+      <Head title="Customers - MUI" description="Meet the teams powered by MUI" />
+      <AppHeaderBanner />
+      <AppHeader />
+      <Divider />
+      <main id="main-content">
+        <CustomersHero />
+        <Box
+          component="ul"
+          sx={{
+            display: 'grid',
+            m: 0,
+            p: 0,
+            gap: 2,
+          }}
+        >
+          <CustomersSpotlight customers={props.customers} />
+        </Box>
+        <Divider />
+        <CustomerLogos />
+        <Divider />
+        <CustomersTestimonials />
+        <Divider />
+        <HeroEnd />
+        <Divider />
+      </main>
+      <AppFooter />
+    </BrandingCssVarsProvider>
+  );
+}
diff --git a/docs/src/components/customers/CustomerLogos.tsx b/docs/src/components/customers/CustomerLogos.tsx
@@ -0,0 +1,108 @@
+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<ProductCategory, typeof MATERIAL_UI_CUSTOMERS> = {
+  '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<ProductCategory>('material-ui');
+
+  return (
+    <Section maxWidth="100%" cozy>
+      <SectionHeadline
+        alwaysCenter
+        overline="Explore our products"
+        title={
+          <Typography variant="h2" component="h2">
+            MUI&apos;s comprehensive suite of UI tools <br /> helps you
+            <GradientText>&nbsp; ship better and faster</GradientText>
+          </Typography>
+        }
+      />
+      <Stack
+        maxWidth="100%"
+        direction="row"
+        spacing={2}
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          gap: 1.5,
+          mt: 4,
+          mb: 4,
+        }}
+      >
+        {PRODUCT_CATEGORIES.map((category) => (
+          <Chip
+            key={category.value}
+            label={category.label}
+            onClick={() => setActiveCategory(category.value)}
+            sx={(theme) => ({
+              borderRadius: '18px',
+              '&.MuiChip-root': {
+                backgroundColor: activeCategory === category.value ? 'primary.main' : 'transparent',
+                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',
+                },
+              },
+            })}
+          />
+        ))}
+      </Stack>
+      <Grid>
+        <LogosGrid data={PRODUCT_CUSTOMERS[activeCategory]} />
+      </Grid>
+    </Section>
+  );
+}