diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index b75f8f2c300eca..5fe212d5d5714e 100644 --- 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; authors?: Array; 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 new file mode 100644 index 00000000000000..bd565835ecab4f --- /dev/null +++ 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) { + return ( + + + + + +
+ + + + + + + + + +
+ + + ); +} diff --git a/docs/pages/customers/athena.js b/docs/pages/customers/athena.js new file mode 100644 index 00000000000000..41573850c05c03 --- /dev/null +++ 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 ; +} diff --git a/docs/pages/customers/athena.md b/docs/pages/customers/athena.md new file mode 100644 index 00000000000000..d2d147939e8a6b --- /dev/null +++ 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 +--- + + + + +Athena logo + + +Athena logo + + +**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. + + +
+ 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. +
+ + – Brendon Geils, Founder & CEO + +
+ + +
+ 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. +
+ + – Brendon Geils, Founder & CEO + +
+ + +## 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. + + + +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 new file mode 100644 index 00000000000000..05c297d1edb9ed --- /dev/null +++ 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 ; +} diff --git a/docs/pages/customers/att.md b/docs/pages/customers/att.md new file mode 100644 index 00000000000000..6b8796fe167a26 --- /dev/null +++ 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 +--- + + + +# AT&T | Streamlining development workflows for internal tools + +AT&T logo + +## 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. + + +
+ MUI X has enabled us to develop faster and maintain standards across our multiple applications. +
+ + – Bliss Keith, Principal Scrum Master + +
+ + +
+ MUI X has enabled us to develop faster and maintain standards across our multiple applications. +
+ + – Bliss Keith, Principal Scrum Master + +
+ + +## 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 new file mode 100644 index 00000000000000..5b7ebbb6440dc9 --- /dev/null +++ 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 ; +} diff --git a/docs/pages/customers/cgi.md b/docs/pages/customers/cgi.md new file mode 100644 index 00000000000000..a3c468ef2da68c --- /dev/null +++ b/docs/pages/customers/cgi.md @@ -0,0 +1,91 @@ +--- +title: CGI +description: How CGI's Techyon Project enhanced performance and usability with MUI X. +image: '/static/branding/companies/cgi_spotlight.svg' +tags: ['MUI X'] +rank: '5' +manualCard: true +--- + + + +# How CGI's Techyon Project enhanced performance and usability with MUI X + +CGI logo + +## 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. + + +
+ 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 Lead + +
+ + +
+ 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 Lead + +
+ + +## 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 UX. +- Creating an intuitive, consistent, and user-friendly interface for energy operators and analysts. +- Ensuring developers could quickly build and iterate without wasting time on minor yet complex UI issues. + +## Solution + +CGI adopted the 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 no longer had to deal with a sluggish UI, and could reap the benefits of instant data loading for large datasets. 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. diff --git a/docs/pages/customers/coupa.js b/docs/pages/customers/coupa.js new file mode 100644 index 00000000000000..f81d1372fa6a94 --- /dev/null +++ b/docs/pages/customers/coupa.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './coupa.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/coupa.md b/docs/pages/customers/coupa.md new file mode 100644 index 00000000000000..a258625a4358d5 --- /dev/null +++ b/docs/pages/customers/coupa.md @@ -0,0 +1,103 @@ +--- +title: Coupa +description: Delivering features 50% faster with MUI Components. +image: '/static/branding/companies/coupa_spotlight.svg' +rank: '3' +tags: ['MUI X'] +manualCard: true +--- + + + +# Coupa | Delivering features 50% faster with MUI components + +Coupa logo + +## Overview + +[Coupa Software](https://www.coupa.com/) is a cloud-based spend management platform that helps businesses streamline procurement, invoicing, expense management, and supplier management. They needed to modernize their frontend components to meet strict deadlines for a new mid-market product. They selected MUI to replace their outdated in-house component library, leveraging MUI's comprehensive ecosystem and advanced components. + + +
+ We had very strict and aggressive deadlines, and we were able to meet them. If we had done it using our own components, it probably would have been at least six to eight months over the deadline. So, with MUI we got 50% faster. But when you put that on a longer horizon, I think that number is bigger because of [the benefits when tackling] maintenance, and shifting paradigms and business needs. +
+ + – Ali Sipahi, Engineering Manager + +
+ + +
+ We had very strict and aggressive deadlines, and we were able to meet them. If we had done it using our own components, it probably would have been at least six to eight months over the deadline. So, with MUI we got 50% faster. But when you put that on a longer horizon, I think that number is bigger because of [the benefits when tackling] maintenance, and shifting paradigms and business needs. +
+ + – Ali Sipahi, Engineering Manager + +
+ + +## Challenge + +Coupa was struggling with a twelve year old in-house component library that was: + +- built on React 17 but difficult to maintain and update +- lacking a unified design system +- limited in component offerings +- difficult to scale as it was built specifically for one application +- marred by inconsistent component nomenclature + +As Ali explained, it was built over a long period of time and without a complete plan, so some things were difficult to update and maintain. It didn't have a design system behind it, which made it difficult to create a unified appearance. + +## Solution + +After researching various options, Coupa implemented MUI with a focus on: + +- Creating custom theme to match their existing design system +- Integrating MUI components within a greenfield application +- Expanding usage from core components to MUI X advanced components (Date Picker and Charts) + +## Results + +After integrating MUI X, Coupa managed to meet an aggressive one-year product delivery deadline resulting in a 50% faster time to market. +They significantly enhanced the UX with a unified, modern interface. +They also increased the platform production quality with reduced P0 and P1 bugs. +Recently, they also integrated MUI X Charts in a new AI chatbot feature: + + + +## Developer experience + +The switch to MUI dramatically improved the developer workflow as the consistent component APIs made implementation timelines predictable. +The MUI component structure and the comprehensive documentation reduced the learning time and simplified onboarding for new team members. +It also reduced friction between design and development teams. + + +
+I think our biggest advantage with using MUI is the maturity of the product. Beyond a dedicated team that offers enterprise level support, there's a big community around it. It's easy to find resources. While some of the newer libraries might do some shiny new things, their reliability and the future is always questionable. - Ali +
+ + +
+I think our biggest advantage with using MUI is the maturity of the product. Beyond a dedicated team that offers enterprise level support, there's a big community around it. It's easy to find resources. While some of the newer libraries might do some shiny new things, their reliability and the future is always questionable. - Ali +
+ diff --git a/docs/pages/customers/delivery-hero.js b/docs/pages/customers/delivery-hero.js new file mode 100644 index 00000000000000..88b3b0bf0d84c8 --- /dev/null +++ b/docs/pages/customers/delivery-hero.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './delivery-hero.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/delivery-hero.md b/docs/pages/customers/delivery-hero.md new file mode 100644 index 00000000000000..5d4ef2d59675cf --- /dev/null +++ b/docs/pages/customers/delivery-hero.md @@ -0,0 +1,80 @@ +--- +title: Delivery Hero +description: How Delivery Hero's Partner Portal streamlined development with MUI X. +image: '/static/branding/companies/deliveryhero_spotlight.svg' +tags: ['MUI X'] +rank: '7' +manualCard: true +--- + + + +# How Delivery Hero's Partner Portal streamlined development with MUI X + +Delivery Hero logo + +## Overview + +[Delivery Hero](https://www.deliveryhero.com/) is a leading local delivery platform, operating in around 70 countries. They connect customers with restaurants, shops, and essential services through fast, technology-driven delivery solutions. Their Partner Portal provides restaurant and vendors with tools to manage operations efficiently, enhance customer experience, and optimizing performance. + + +
+ By leveraging the Date Time Picker and Data Grid, 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 + +
+ + +
+ By leveraging the Date Time Picker and Data Grid, 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 + +
+ + +## Challenge + +Before adopting MUI X, the Delivery Hero team faced two major challenges: + +- Fixing vendor reported bugs and implementing feature requests took time due to the slow development speed. Building, testing, and refining UI components was a slow process. +- Ensuring a consistent, easy-to-use and performant experience for end users was difficult. + +## Solution + +To address these challenges, the team integrated the Date and Time Pickers and Data Grid into their platform. +These components enabled them to: + +- Accelerate development by using pre-built, high-quality components. This reduced the time spent on UI implementation. +- Enhance usability by offering a modern, sleek UI that improves user interactions and consistency. +- Optimize performance by providing a smooth experience for restaurant and shop managers. + +## Results + +After implementing MUI X, the team saw immediate benefits. UI development became faster and more efficient, which gave them more time to focus on business features. + +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. + +## Developer experience + +The team praised the MUI documentation, describing it as clear, well-structured, and easy to follow. This helped their developers integrate and customize components effortlessly. +For developers looking to build modern, high-performance UI components with minimal effort, the Delivery Hero team highly recommends MUI X. diff --git a/docs/pages/customers/john-deere.js b/docs/pages/customers/john-deere.js new file mode 100644 index 00000000000000..a3822aecf2baac --- /dev/null +++ b/docs/pages/customers/john-deere.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './john-deere.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/john-deere.md b/docs/pages/customers/john-deere.md new file mode 100644 index 00000000000000..4e46fcbaf13e8f --- /dev/null +++ b/docs/pages/customers/john-deere.md @@ -0,0 +1,68 @@ +--- +title: John Deere +description: How John Deere standardized UI development with MUI X. +image: '/static/branding/companies/johndeere_spotlight.svg' +tags: ['MUI X'] +rank: '6' +manualCard: true +--- + + + +# How John Deere standardized UI development with MUI X + +John Deere logo + +## Overview + +[John Deere](https://www.deere.com/en/) is a global leader in agricultural, construction, and forestry machinery, as well as diesel engines and financial services, and is recognized globally for its innovation and quality in these sectors. +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 + +
+ + +
+ 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 + +
+ + +## Challenge + +With multiple teams working towards different design goals, maintaining consistency for developers was a major challenge. +Frontend teams at John Deere needed a reliable, standardized component library to bridge the gaps in their internal design system. + +## Solution + +By integrating MUI X, John Deere's teams found a baseline of standardized components to rely on, ensuring a cohesive development approach in places where their in-house 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, battle-tested components. +- Enhanced flexibility – MUI X filled in the gaps where the internal design system fell short. diff --git a/docs/pages/customers/moz.js b/docs/pages/customers/moz.js new file mode 100644 index 00000000000000..2ea7c0b2f6f1e6 --- /dev/null +++ b/docs/pages/customers/moz.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './moz.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/moz.md b/docs/pages/customers/moz.md new file mode 100644 index 00000000000000..3dc1bf9a260d4d --- /dev/null +++ b/docs/pages/customers/moz.md @@ -0,0 +1,95 @@ +--- +title: Moz +description: How Moz optimized large-scale keyword analysis with MUI X. +image: '/static/branding/companies/moz_spotlight.svg' +tags: ['MUI X'] +rank: '8' +manualCard: true +--- + + + +# How Moz optimized large-scale keyword analysis with MUI X + +MOZ logo + +## Overview + +[Moz](https://moz.com/), 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 + +
+ + +
+ 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 + +
+ + +## Challenge + +Moz needed a UI library that could: + +- Efficiently cater to customer requests and offer a robust handling of large keyword datasets. +- Support customization for filtering, sorting, grouping and showing data in complex data grids in a readable way. +- Give a consistent and standard experience to the UI across all user facing applications. + +## Solution + +To meet these challenges, Moz integrated Data Grid and Date Picker components to create an optimized, interactive, and performant UI. +Key benefits of using MUI X included: + +- Great DX and UX – a developer-friendly and intuitive user experience. +- Advanced customization capabilities – Data Grid API refs allowed them to build a UI for filtering and column management, a game-changer for their keyword analysis platform. +- Faster feature development – accelerating product delivery across the platform. + +## Results + +By adopting MUI X, Moz could handle large keyword datasets efficiently with MUI X's performance optimizations, which helped them scale their platform. They could neatly display vast amounts of keyword data that the end users find easy to navigate. The highly customizable Data Grid enables them to offer advanced filtering and column management features to their end users. + +## Developer experience + +Moz developers found MUI documentation intuitive and in-depth, making customizations straightforward. + +:::info +Moz pro tip: "Read the docs thoroughly—there are many small examples that can greatly help with customization." +::: + + +
+MUI X is recommended for developers working with large-scale, data-intensive applications. +Its performance, flexibility, and ease of use makes it a top choice for scalable UI development. - Darko +
+ + +
+MUI X is recommended for developers working with large-scale, data-intensive applications. +Its performance, flexibility, and ease of use makes it a top choice for scalable UI development. - Darko +
+ diff --git a/docs/pages/customers/oregon.js b/docs/pages/customers/oregon.js new file mode 100644 index 00000000000000..ab0b22165061b9 --- /dev/null +++ b/docs/pages/customers/oregon.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './oregon.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/oregon.md b/docs/pages/customers/oregon.md new file mode 100644 index 00000000000000..8709c41d0a6124 --- /dev/null +++ b/docs/pages/customers/oregon.md @@ -0,0 +1,88 @@ +--- +title: Oregon State University +description: How Oregon State University transformed course planning with the MUI X Data Grid. +image: '/static/branding/companies/oregon.svg' +tags: ['MUI X'] +rank: '10' +manualCard: true +--- + + + +Oregon logo + +**Partner Since: 2021** + +## Overview + +[Oregon State University](https://oregonstate.edu/) is a premier public land-grant research university located in Corvallis, Oregon, recognized for innovation, world-class research, and a diverse academic environment with strong community engagement and global impact. +To improve their course planning and faculty assignment, they developed Resource Insights, an application for managing course sections, faculty availability, and student demand. +It replaced outdated Excel-based methods with a modern online system. +The tool integrates with existing university systems to provide real-time enrollment data, eliminating manual data entry. + + +
+ MUI X provides the right balance of performance, customization, and React integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering. +
+ + – Mark Clements, Manager, Software Development & Quality + +
+ + +
+ MUI X provides the right balance of performance, customization, and React integration. If you need a scalable, spreadsheet-like experience in your web app, it's definitely worth considering. +
+ + – Mark Clements, Manager, Software Development & Quality + +
+ + +## 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 library that was well-supported, actively maintained, and built specifically for React. +- Ensuring high performance and customization while keeping the UI intuitive. + While alternatives like AG Grid were considered, MUI X was preferred because it's deeply integrated with React, whereas AG Grid's approach spans multiple frontend frameworks, leading to inconsistencies in React implementations. + +## Solution + +The team adopted the 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 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. + +The Resource Insights team sees the Data grid as an essential component for projects requiring complex tabular interactions. diff --git a/docs/pages/customers/qdrant.js b/docs/pages/customers/qdrant.js new file mode 100644 index 00000000000000..1f18895a526b16 --- /dev/null +++ b/docs/pages/customers/qdrant.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './qdrant.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/qdrant.md b/docs/pages/customers/qdrant.md new file mode 100644 index 00000000000000..cc8bee08cb05b3 --- /dev/null +++ b/docs/pages/customers/qdrant.md @@ -0,0 +1,105 @@ +--- +title: Qdrant +description: Accelerating feature delivery as a rising vector database provider. +image: '/static/branding/companies/qdrant_spotlight.svg' +tags: ['MUI X'] +rank: '1' +manualCard: true +--- + + + +# Qdrant | Accelerating feature delivery as a rising vector database provider + +Qdrant logo + +## Overview + +[Qdrant](https://qdrant.tech/) is an open-source vector database provider with over 25k GitHub stars. Thousands of companies use Qdrant to make sense of their unstructured data through advanced search, recommendation, and other AI capabilities. After a $30M Series-A funding, Qdrant needed to transition into a sustainable business. + +Their frontend team uses Material UI across all of their products, websites, and dashboards. +After starting with MUI's open-source components, Qdrant upgraded to a perpetual Pro license for the Date Range Picker, with further plans to explore Data Grid and Charts. + + +
+ Having built a date range picker from scratch before, I know firsthand how challenging and time-consuming it can be—it's truly a nightmare. I decided to use the MUI X date range picker. I simply read the documentation, plugged it in, and it worked seamlessly. Honestly, it was a delight. +
+ + – Josep Fornies, Senior Frontend Developer + +
+ + + +
+ Having built a date range picker from scratch before, I know firsthand how challenging and time-consuming it can be—it's truly a nightmare. I decided to use the MUI X date range picker. I simply read the documentation, plugged it in, and it worked seamlessly. Honestly, it was a delight. +
+ + – Josep Fornies, Senior Frontend Developer + +
+ + +## Challenge + +As a startup in the competitive vector database space, Qdrant faced several critical challenges: + +- Speed-to-market pressure – The team needed to "move fast and break things" while building their core product. Fast prototyping and rapid development cycles were essential to stay competitive and meet growing customer demands. + +- Limited date selection functionality – Their existing date selection interface was restrictive, offering only presets for periods like a month, a week, or a day. This limitation prevented users from performing granular, custom date-based queries on their vector data—a critical requirement for enterprise customers. + +- JavaScript date complexity – Joseph, a frontend developer at Qdrant, described implementing custom date pickers from scratch as "a nightmare" due to the inherent complexity of JavaScript date handling. The team needed a robust, battle-tested solution rather than building on their own. + +- Design consistency – With a small team of developers and limited design resources, maintaining a cohesive, professional interface across multiple products was challenging. + +## Solution + +Qdrant adopted Material UI as their primary frontend component library, leveraging both open-source and Pro components: + +- Comprehensive component usage – The team had prior experience with Material UI from their previous projects and choosing it again was a no-brainer. They implemented MUI components extensively across their entire product suite, using everything from primitive elements like appbars and menus to advanced components. + +- Pro license upgrade – After recognizing the value of MUI's advanced components through the community plan, Qdrant purchased a perpetual Pro license specifically for the Date Range Picker, with plans to integrate Data Grid and Charts. The buying process was smooth and the team was able to get started quickly. + +- Design system integration – The team utilized MUI's Figma design kit and theme extractor to streamline their design-to-development workflow. This allowed their limited design team to create consistent interfaces using pre-built components. + + + +In the image above from MUI's Qdrant dashboard (yes, we're their customer, too!), the MUI X Date Time Picker has been used to enable the date-time range selection functionality. + +## Results + +Qdrant achieved significant improvements in both development velocity and UX after adopting MUI. +The implementation of the Date Range Picker was quick and elevated their date selection interface from simple presets to a robust system with options like "last 5 minutes," "last 1 hour," "today," and fully custom date ranges. + +The plug-and-play nature of MUI components greatly accelerated development by removing the pain and complexity of building custom solutions. +As Joseph noted, implementing date pickers from scratch would have been challenging, but with MUI, it was a matter of straightforward configuration and integration. + +## Developer experience + +Qdrant's development team consistently praised MUI's developer experience. +The team highlighted MUI's comprehensive documentation, well-documented APIs, and clear migration guides as standout features that accelerated their implementation process. They liked how the components work immediately with minimal configuration. + +The team also appreciated the official MCP server from MUI, and said that it had enhanced agent–driven development. They were also introduced to MUI Chat, the latest AI product from MUI, which enables developers to build with MUI components using natural language prompts. The team agreed that this would accelerate their development speed even more. +The team appreciated having multiple support channels available, including GitHub for technical issues, Zendesk for billing support, and comprehensive online resources for general inquiries. + +The success of MUI at Qdrant shows how the right component library can enable startups to focus on their core product innovation while maintaining professional, scalable user interfaces. diff --git a/docs/pages/customers/tebra.js b/docs/pages/customers/tebra.js new file mode 100644 index 00000000000000..e7ed4ffe889531 --- /dev/null +++ b/docs/pages/customers/tebra.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCaseStudy from 'docs/src/modules/components/TopLayoutCaseStudy'; +import { docs } from './tebra.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/customers/tebra.md b/docs/pages/customers/tebra.md new file mode 100644 index 00000000000000..5e704c6e6eb399 --- /dev/null +++ b/docs/pages/customers/tebra.md @@ -0,0 +1,106 @@ +--- +title: Tebra +description: Modernizing legacy reporting systems in healthcare. +image: '/static/branding/companies/tebra_spotlight.svg' +tags: ['MUI X'] +rank: '2' +manualCard: true +--- + + + +# Tebra | Modernizing legacy reporting systems in healthcare + +Tebra logo + +## Overview + +[Tebra](https://tebra.com/) is a healthcare technology company that has been in the market for over a decade. +As their platform evolved over the years, they accumulated a mix of legacy technologies including JSPs, Angular, and various React implementations, creating inconsistent UX across their platform. + + +
+ Searching in the grid is an absolute killer feature for us. Everything loads to the client-side, and now you can search anything—and the search is so fast and amazing. +
+ + – Ronen Akiva, Senior Director of Engineering + +
+ + +
+ Searching in the grid is an absolute killer feature for us. Everything loads to the client-side, and now you can search anything—and the search is so fast and amazing. +
+ + – Ronen Akiva, Senior Director of Engineering + +
+ + +Ronen leads the teams responsible for embedding MUI components into their design system and managing billing and payments infrastructure. +With nearly six years at the company, Ronen spearheaded the initiative to modernize Tebra's reporting capabilities and create a unified design system. + +## Challenge + +Tebra faced several critical challenges with their legacy reporting system: + +- Fragmented technology stack - The platform consisted of multiple technology generations - JSPs, Angular, and different React implementations - all trying to maintain the same look and feel but with vastly different behaviors and codebases. +- Static, limited reporting - Their existing reports were largely static HTML pages or basic tables with minimal functionality. Users couldn't filter, search, sort, or group data effectively, capabilities that had been standard in desktop applications for fifteen years. +- Maintenance overhead - Implementing new features across multiple technology stacks required separate implementations in different places, increasing development costs and introducing more bugs. +- Inconsistent UX - Users encountered dramatically different experiences depending on which part of the platform they accessed - some screens felt "old and antiquated" while others offered modern functionality. +- Performance constraints - The team had to implement complex throttling and pagination systems to manage large datasets, creating architectural constraints that limited reporting capabilities. + +## Solution + +Here's how Tebra adopted the Data Grid as the cornerstone of their modernization strategy and solved the aforementioned challenges: + +- Unified design system - They built a comprehensive design system using MUI components, with the Data Grid serving as the foundation for all reporting experiences across the platform. + +- Advanced grid capabilities - The team implemented sophisticated features including: + - Dynamic filtering with custom external filter components + - Fast client-side search across up to 10,000 rows + - Grouping and summarization functionality + - Customizable row density for improved readability + - Advanced sorting capabilities + +- Architectural optimization - They moved from database-heavy pagination to client-side data loading, enabling lightning-fast search and filtering while maintaining performance through strategic data limits. + +- Custom enhancements - Tebra extended the base functionality with: + - Reusable filter components with business logic + - Adjustable row height controls for user preference + - Integration with their existing style sheets and branding + +## Results + +The implementation improved the UX across Tebra's entire ecosystem. +Reports evolved from static displays to interactive interfaces that users expect in contemporary applications. +The unified design system enabled teams to migrate legacy experiences seamlessly, speeding up development cycles. +The Data Grid served as a catalyst in this process thanks to its built-in client-side search, with the improved data loading capabilities providing instantaneous search results while maintaining a high level of performance. +This enabled the team to completely eliminate the complex throttling mechanisms they had previously relied upon. + +Beyond immediate technical benefits, the standardized component library created a foundation for accelerated AI-assisted development workflows. +The architecture is now well prepared for advanced features like lazy loading, which will further simplify the handling of larger datasets. +Tebra is actively exploring additional features like Pivot Tables for their upcoming analytics dashboards. + +## Developer Experience + +Exceptional documentation - Ronen praised MUI's documentation as "phenomenal," enabling teams to test and demo features without writing custom code, and helping sell the component capabilities to non-technical stakeholders. + +Seamless integration - Since Tebra was already using the open-source MUI libraries, adopting the Data Grid was a natural progression that avoided vendor proliferation. + +The team values the ongoing relationship with MUI and the ability to influence the product roadmap through feedback and potential feature requests. diff --git a/docs/public/static/branding/companies/CGI.svg b/docs/public/static/branding/companies/CGI.svg new file mode 100644 index 00000000000000..964b82a38994f4 --- /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/atandt-dark.svg b/docs/public/static/branding/companies/atandt-dark.svg index d3279a76aeb752..2b5d604cff4736 100644 --- a/docs/public/static/branding/companies/atandt-dark.svg +++ b/docs/public/static/branding/companies/atandt-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/public/static/branding/companies/atandt-light.svg b/docs/public/static/branding/companies/atandt-light.svg index de8185359fa5da..c5e04455ce2b33 100644 --- a/docs/public/static/branding/companies/atandt-light.svg +++ b/docs/public/static/branding/companies/atandt-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ 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 00000000000000..24d11a6dd1c349 Binary files /dev/null and b/docs/public/static/branding/companies/athena-dark.png differ diff --git a/docs/public/static/branding/companies/athena-light.png b/docs/public/static/branding/companies/athena-light.png new file mode 100644 index 00000000000000..de20cdc58f5c2a Binary files /dev/null and b/docs/public/static/branding/companies/athena-light.png differ diff --git a/docs/public/static/branding/companies/athena-ui.png b/docs/public/static/branding/companies/athena-ui.png new file mode 100644 index 00000000000000..9a96a4d3a7bbc5 Binary files /dev/null and b/docs/public/static/branding/companies/athena-ui.png differ diff --git a/docs/public/static/branding/companies/atnt_spotlight.svg b/docs/public/static/branding/companies/atnt_spotlight.svg new file mode 100644 index 00000000000000..a163b2f2c24607 --- /dev/null +++ b/docs/public/static/branding/companies/atnt_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/cgi_spotlight.svg b/docs/public/static/branding/companies/cgi_spotlight.svg new file mode 100644 index 00000000000000..fc89f17401c892 --- /dev/null +++ b/docs/public/static/branding/companies/cgi_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/coupa-ui.png b/docs/public/static/branding/companies/coupa-ui.png new file mode 100644 index 00000000000000..1a99eaa37d6e13 Binary files /dev/null and b/docs/public/static/branding/companies/coupa-ui.png differ diff --git a/docs/public/static/branding/companies/coupa.svg b/docs/public/static/branding/companies/coupa.svg new file mode 100644 index 00000000000000..2d1d272b748405 --- /dev/null +++ b/docs/public/static/branding/companies/coupa.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + diff --git a/docs/public/static/branding/companies/coupa_spotlight.svg b/docs/public/static/branding/companies/coupa_spotlight.svg new file mode 100644 index 00000000000000..03f6e1e1830a2e --- /dev/null +++ b/docs/public/static/branding/companies/coupa_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/delivery-hero.svg b/docs/public/static/branding/companies/delivery-hero.svg new file mode 100644 index 00000000000000..c91ed5f4676541 --- /dev/null +++ b/docs/public/static/branding/companies/delivery-hero.svg @@ -0,0 +1 @@ +delivery-hero-logo diff --git a/docs/public/static/branding/companies/deliveryhero_spotlight.svg b/docs/public/static/branding/companies/deliveryhero_spotlight.svg new file mode 100644 index 00000000000000..a53db886a1bce2 --- /dev/null +++ b/docs/public/static/branding/companies/deliveryhero_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/headers/atnt-header.png b/docs/public/static/branding/companies/headers/atnt-header.png new file mode 100644 index 00000000000000..4f6d4f19d22228 Binary files /dev/null and b/docs/public/static/branding/companies/headers/atnt-header.png differ diff --git a/docs/public/static/branding/companies/headers/cgi-header.png b/docs/public/static/branding/companies/headers/cgi-header.png new file mode 100644 index 00000000000000..5e80ef2fff390f Binary files /dev/null and b/docs/public/static/branding/companies/headers/cgi-header.png differ diff --git a/docs/public/static/branding/companies/headers/coupa-header.png b/docs/public/static/branding/companies/headers/coupa-header.png new file mode 100644 index 00000000000000..1cf8f23c9a857e Binary files /dev/null and b/docs/public/static/branding/companies/headers/coupa-header.png differ diff --git a/docs/public/static/branding/companies/headers/deliveryhero-header.png b/docs/public/static/branding/companies/headers/deliveryhero-header.png new file mode 100644 index 00000000000000..29950fac6bb02f Binary files /dev/null and b/docs/public/static/branding/companies/headers/deliveryhero-header.png differ diff --git a/docs/public/static/branding/companies/headers/johndeere-header.png b/docs/public/static/branding/companies/headers/johndeere-header.png new file mode 100644 index 00000000000000..037a008f7d3316 Binary files /dev/null and b/docs/public/static/branding/companies/headers/johndeere-header.png differ diff --git a/docs/public/static/branding/companies/headers/moz-header.png b/docs/public/static/branding/companies/headers/moz-header.png new file mode 100644 index 00000000000000..7d302fda43aca1 Binary files /dev/null and b/docs/public/static/branding/companies/headers/moz-header.png differ diff --git a/docs/public/static/branding/companies/headers/qdrant-header.png b/docs/public/static/branding/companies/headers/qdrant-header.png new file mode 100644 index 00000000000000..1d4c058ab37a71 Binary files /dev/null and b/docs/public/static/branding/companies/headers/qdrant-header.png differ diff --git a/docs/public/static/branding/companies/headers/tebra-header.png b/docs/public/static/branding/companies/headers/tebra-header.png new file mode 100644 index 00000000000000..b80ca3c2d6107f Binary files /dev/null and b/docs/public/static/branding/companies/headers/tebra-header.png differ diff --git a/docs/public/static/branding/companies/john-deere.svg b/docs/public/static/branding/companies/john-deere.svg new file mode 100644 index 00000000000000..b55c00c3a63d60 --- /dev/null +++ b/docs/public/static/branding/companies/john-deere.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/static/branding/companies/johndeere_spotlight.svg b/docs/public/static/branding/companies/johndeere_spotlight.svg new file mode 100644 index 00000000000000..5ec2d9c4c8153e --- /dev/null +++ b/docs/public/static/branding/companies/johndeere_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ 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..629150025ad297 --- /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/moz_spotlight.svg b/docs/public/static/branding/companies/moz_spotlight.svg new file mode 100644 index 00000000000000..fa75400cd2d21a --- /dev/null +++ b/docs/public/static/branding/companies/moz_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ 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/public/static/branding/companies/qdrant-dark.svg b/docs/public/static/branding/companies/qdrant-dark.svg new file mode 100644 index 00000000000000..95a3c628ab0111 --- /dev/null +++ b/docs/public/static/branding/companies/qdrant-dark.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/qdrant-light.svg b/docs/public/static/branding/companies/qdrant-light.svg new file mode 100644 index 00000000000000..7c95d5e65759e2 --- /dev/null +++ b/docs/public/static/branding/companies/qdrant-light.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/qdrant_spotlight.svg b/docs/public/static/branding/companies/qdrant_spotlight.svg new file mode 100644 index 00000000000000..0c3d1a9350b0ad --- /dev/null +++ b/docs/public/static/branding/companies/qdrant_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/docs/public/static/branding/companies/qdrant_ui.png b/docs/public/static/branding/companies/qdrant_ui.png new file mode 100644 index 00000000000000..23dc9323ea4607 Binary files /dev/null and b/docs/public/static/branding/companies/qdrant_ui.png differ diff --git a/docs/public/static/branding/companies/slider/amazon.png b/docs/public/static/branding/companies/slider/amazon.png new file mode 100644 index 00000000000000..602d1d628d4af2 Binary files /dev/null and b/docs/public/static/branding/companies/slider/amazon.png differ diff --git a/docs/public/static/branding/companies/slider/apple.png b/docs/public/static/branding/companies/slider/apple.png new file mode 100644 index 00000000000000..1ec7a49febf5e6 Binary files /dev/null and b/docs/public/static/branding/companies/slider/apple.png differ diff --git a/docs/public/static/branding/companies/slider/atnt.png b/docs/public/static/branding/companies/slider/atnt.png new file mode 100644 index 00000000000000..a53da0598e3502 Binary files /dev/null and b/docs/public/static/branding/companies/slider/atnt.png differ diff --git a/docs/public/static/branding/companies/slider/deloitte.png b/docs/public/static/branding/companies/slider/deloitte.png new file mode 100644 index 00000000000000..481b1df5b84802 Binary files /dev/null and b/docs/public/static/branding/companies/slider/deloitte.png differ diff --git a/docs/public/static/branding/companies/slider/nasa.png b/docs/public/static/branding/companies/slider/nasa.png new file mode 100644 index 00000000000000..808146d59107c4 Binary files /dev/null and b/docs/public/static/branding/companies/slider/nasa.png differ diff --git a/docs/public/static/branding/companies/slider/netflix.png b/docs/public/static/branding/companies/slider/netflix.png new file mode 100644 index 00000000000000..b52f1f1f0151f8 Binary files /dev/null and b/docs/public/static/branding/companies/slider/netflix.png differ diff --git a/docs/public/static/branding/companies/slider/samsung.png b/docs/public/static/branding/companies/slider/samsung.png new file mode 100644 index 00000000000000..85183257aebb61 Binary files /dev/null and b/docs/public/static/branding/companies/slider/samsung.png differ diff --git a/docs/public/static/branding/companies/slider/shutterstock.png b/docs/public/static/branding/companies/slider/shutterstock.png new file mode 100644 index 00000000000000..9b254adc59a942 Binary files /dev/null and b/docs/public/static/branding/companies/slider/shutterstock.png differ diff --git a/docs/public/static/branding/companies/slider/spotify.png b/docs/public/static/branding/companies/slider/spotify.png new file mode 100644 index 00000000000000..b7c85d30739e5f Binary files /dev/null and b/docs/public/static/branding/companies/slider/spotify.png differ diff --git a/docs/public/static/branding/companies/slider/tesla.png b/docs/public/static/branding/companies/slider/tesla.png new file mode 100644 index 00000000000000..e3f6056c0f7e89 Binary files /dev/null and b/docs/public/static/branding/companies/slider/tesla.png differ diff --git a/docs/public/static/branding/companies/slider/unity.png b/docs/public/static/branding/companies/slider/unity.png new file mode 100644 index 00000000000000..6c0a72ff960bc2 Binary files /dev/null and b/docs/public/static/branding/companies/slider/unity.png differ diff --git a/docs/public/static/branding/companies/slider/verizon.png b/docs/public/static/branding/companies/slider/verizon.png new file mode 100644 index 00000000000000..c5cd5443dc0983 Binary files /dev/null and b/docs/public/static/branding/companies/slider/verizon.png differ diff --git a/docs/public/static/branding/companies/slider/volvo.png b/docs/public/static/branding/companies/slider/volvo.png new file mode 100644 index 00000000000000..77b6f3c85bd51e Binary files /dev/null and b/docs/public/static/branding/companies/slider/volvo.png differ diff --git a/docs/public/static/branding/companies/tebra.svg b/docs/public/static/branding/companies/tebra.svg new file mode 100644 index 00000000000000..e48a3b441442f3 --- /dev/null +++ b/docs/public/static/branding/companies/tebra.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/public/static/branding/companies/tebra_spotlight.svg b/docs/public/static/branding/companies/tebra_spotlight.svg new file mode 100644 index 00000000000000..a7d72ae5094536 --- /dev/null +++ b/docs/public/static/branding/companies/tebra_spotlight.svg @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx new file mode 100644 index 00000000000000..92f28a212364a2 --- /dev/null +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -0,0 +1,231 @@ +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 + + { + 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. 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 ( + ({ + p: 3, + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'end', + color: 'text.primary', + border: '1px solid', + borderColor: 'divider', + background: + isFirstColumn || isLastColumn + ? `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(#131C23 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, #131C23 5%, #15181A 20%)` + : 'background.paper', + }), + gap: 2, + })} + > +
{profile.company}
+ + + {quote} + + +
+ + {profile.name} + + {profile.role} +
+ + + + + ); +} + +export default function CustomerQuotes() { + return ( + + {QUOTES.map((item) => ( + + + + ))} + + ); +} diff --git a/docs/src/components/customers/CustomersHero.tsx b/docs/src/components/customers/CustomersHero.tsx new file mode 100644 index 00000000000000..dc8a8464cb3d95 --- /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" + /> +
+ ); +} diff --git a/docs/src/components/customers/CustomersLogoSlider.tsx b/docs/src/components/customers/CustomersLogoSlider.tsx new file mode 100644 index 00000000000000..edb92f8261d458 --- /dev/null +++ b/docs/src/components/customers/CustomersLogoSlider.tsx @@ -0,0 +1,165 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import { keyframes } from '@mui/material/styles'; + +interface CustomerLogo { + name: string; + lightLogo: string; +} + +interface CustomersLogoSliderProps { + logos?: CustomerLogo[]; +} + +const scroll = keyframes` + from { transform: translateX(0); } + to { transform: translateX(-100%); } +`; + +const defaultCustomerLogos: CustomerLogo[] = [ + { name: 'Spotify', lightLogo: '/static/branding/companies/slider/spotify.png' }, + { name: 'Amazon', lightLogo: '/static/branding/companies/slider/amazon.png' }, + { name: 'Netflix', lightLogo: '/static/branding/companies/slider/netflix.png' }, + { name: 'Unity', lightLogo: '/static/branding/companies/slider/unity.png' }, + { name: 'AT&T', lightLogo: '/static/branding/companies/slider/atnt.png' }, + { name: 'Tesla', lightLogo: '/static/branding/companies/slider/tesla.png' }, + { name: 'Samsung', lightLogo: '/static/branding/companies/slider/samsung.png' }, + { name: 'Verizon', lightLogo: '/static/branding/companies/slider/verizon.png' }, + { name: 'Shutterstock', lightLogo: '/static/branding/companies/slider/shutterstock.png' }, + { name: 'Apple', lightLogo: '/static/branding/companies/slider/apple.png' }, + { name: 'Volvo', lightLogo: '/static/branding/companies/slider/volvo.png' }, + { name: 'NASA', lightLogo: '/static/branding/companies/slider/nasa.png' }, + { name: 'Deloitte', lightLogo: '/static/branding/companies/slider/deloitte.png' }, +]; + +export default function CustomersLogoSlider({ + logos = defaultCustomerLogos, +}: CustomersLogoSliderProps) { + React.useEffect(() => { + logos.forEach((logo) => { + const img = new Image(); + img.src = logo.lightLogo; + }); + }, [logos]); + + const logoWidth = 150; + const gapSize = 24; + const totalWidth = logos.length * (logoWidth + gapSize); + + return ( + + + + + {logos.map((logo, index) => ( + ({ + height: { xs: 42, sm: 50, md: 70 }, + width: '150px', + objectFit: 'contain', + opacity: 0.7, + transition: 'opacity 0.3s ease-in-out, filter 0.3s ease-in-out', + flexShrink: 0, + marginRight: 3, + filter: 'none', + backfaceVisibility: 'hidden', + ...theme.applyDarkStyles({ + filter: + 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)', + }), + '&:hover': { + opacity: 1, + }, + })} + /> + ))} + + + {logos.map((logo, index) => ( + ({ + height: { xs: 42, sm: 50, md: 70 }, + width: '150px', + objectFit: 'contain', + opacity: 0.7, + transition: 'opacity 0.3s ease-in-out, filter 0.3s ease-in-out', + flexShrink: 0, + marginRight: 3, + filter: 'none', + backfaceVisibility: 'hidden', + ...theme.applyDarkStyles({ + filter: + 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)', + }), + '&:hover': { + opacity: 1, + }, + })} + /> + ))} + + + + + ); +} diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx new file mode 100644 index 00000000000000..5f53b27c9f915f --- /dev/null +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -0,0 +1,184 @@ +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 Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; + +interface SpotlightProps { + posts: BlogPost[]; + variant?: 'primary' | 'secondary'; +} + +function Spotlight({ posts, variant = 'primary' }: SpotlightProps) { + React.useEffect(() => { + posts.forEach((post) => { + if (post.image) { + const img = new Image(); + img.src = post.image; + } + }); + }, [posts]); + + return ( + + + {posts.map((post, index) => ( + ({ + py: variant === 'primary' ? 3 : 2, + px: variant === 'primary' ? 4 : 2, + minHeight: variant === 'primary' ? '230px' : '150px', + display: 'flex', + alignItems: 'start', + flexDirection: 'column', + position: 'relative', + backgroundImage: (t.vars || t).palette.gradients.linearSubtle, + boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', + textDecoration: 'none', + color: 'inherit', + cursor: 'pointer', + transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', + overflow: 'hidden', + '&:hover': { + backgroundImage: (t.vars || t).palette.gradients.radioSubtle, + }, + })} + > + {post.image && ( + ({ + position: variant === 'primary' ? 'absolute' : 'relative', + top: variant === 'primary' ? 30 : 'auto', + left: variant === 'primary' ? 30 : 'auto', + alignSelf: variant === 'secondary' ? 'center' : 'auto', + mt: variant === 'secondary' ? 3 : 0, + mb: variant === 'secondary' ? 'auto' : 0, + maxWidth: '100%', + maxHeight: '50px', + width: 'auto', + zIndex: 1, + filter: 'brightness(0) saturate(100%)', + ...theme.applyDarkStyles({ + filter: + 'brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(0%) hue-rotate(84deg) brightness(104%) contrast(111%)', + }), + })} + /> + )} + {variant === 'primary' && ( + + + {post.description} + + + + )} + {variant === 'secondary' && ( + + )} + + ))} + + + ); +} + +interface CustomersSpotlightProps { + customers: BlogPost[]; +} + +export default function CustomersSpotlight({ customers }: CustomersSpotlightProps) { + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md')); + + // Sort customers by rank and split into first 3 and the rest + const sortedCustomers = [...customers].sort((a, b) => { + const rankA = parseInt(a.rank || '99', 10); + const rankB = parseInt(b.rank || '99', 10); + return rankA - rankB; + }); + const firstPosts = sortedCustomers.slice(0, 2); + const secondPosts = sortedCustomers.slice(2, 4); + const restPosts = sortedCustomers.slice(4, isTablet ? 7 : 8); + + return ( + + + + + + ); +} diff --git a/docs/src/components/customers/CustomersTestimonials.tsx b/docs/src/components/customers/CustomersTestimonials.tsx new file mode 100644 index 00000000000000..8ad02835b5abef --- /dev/null +++ b/docs/src/components/customers/CustomersTestimonials.tsx @@ -0,0 +1,38 @@ +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/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index 6e15ab4750b767..07699f650de9ba 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -383,6 +383,9 @@ export default function HeaderNavBar() {
  • Blog
    • +
  • + Customers +
    • ); diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index bbfbc152d72c92..b313a4b28de7ec 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -278,6 +278,11 @@ export default function HeaderNavDropdown() { Blog +
  • + + Customers + +
    • diff --git a/docs/src/modules/components/TopLayoutCaseStudy.js b/docs/src/modules/components/TopLayoutCaseStudy.js new file mode 100644 index 00000000000000..dceb3df9c2d974 --- /dev/null +++ b/docs/src/modules/components/TopLayoutCaseStudy.js @@ -0,0 +1,275 @@ +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 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 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'; + +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 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 ( + + + +