From 2d9904de2bd3b5fbcc430f6cfe587bf342635e54 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 16 Feb 2024 13:35:22 -0300 Subject: [PATCH 1/2] add the Start now section and other small tweaks --- .../getting-started/overview/overview.md | 14 ++-- .../MaterialStartingLinksCollection.js | 74 +++++++++++++++++++ 2 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 docs/src/modules/components/MaterialStartingLinksCollection.js diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 618ee12e80067d..7d9b74cde97f91 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -10,12 +10,10 @@ title: Overview Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/). -It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. - -Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components. +It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box, and features a suite of customization options that make it easy to implement your own custom design system on top of our components. :::info -Material UI v5 supports Material Design v2. +Material UI v5 supports Material Design 2. Adoption of Material Design 3 is tentatively planned for Material UI v6—see [the announcement blog post](/blog/2023-material-ui-v6-and-beyond/) for more details. You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates. ::: @@ -33,10 +31,16 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). -## Material UI vs. Base UI +### Material UI vs. Base UI Material UI and [Base UI](/base-ui/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/)). Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use Base UI components and hooks for its foundational structure. + +## Start now + +Get started with Material UI today through some of these useful resources: + +{{"component": "modules/components/MaterialStartingLinksCollection.js"}} diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js new file mode 100644 index 00000000000000..2024d375e25f8c --- /dev/null +++ b/docs/src/modules/components/MaterialStartingLinksCollection.js @@ -0,0 +1,74 @@ +import * as React from 'react'; +import Grid from '@mui/material/Unstable_Grid2'; +import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; +import WebRoundedIcon from '@mui/icons-material/WebRounded'; +import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; +import PlayCircleFilledWhiteRoundedIcon from '@mui/icons-material/PlayCircleFilledWhiteRounded'; +import DesignServicesRoundedIcon from '@mui/icons-material/DesignServicesRounded'; +import InfoCard from 'docs/src/components/action/InfoCard'; + +const content = [ + { + title: 'Installation', + description: 'Add Material UI to your project with a few commands.', + link: '/material-ui/getting-started/installation/', + icon: , + }, + { + title: 'Usage', + description: 'Learn the basics about Material UI components.', + link: '/material-ui/getting-started/usage/', + icon: , + }, + { + title: 'Example projects', + description: 'A collection of boilerplates to jumpstart your next project.', + link: '/material-ui/getting-started/example-projects/', + icon: , + }, + { + title: 'Customizing components', + description: 'Learn about the available customization methods.', + link: '/material-ui/customization/how-to-customize/', + icon: , + }, + { + title: 'Templates', + description: 'Get started with a selection of free templates.', + link: '/material-ui/getting-started/templates/', + icon: , + }, + { + title: 'Design resources', + description: 'The Material UI components in your favorite design tool.', + link: 'https://www.figma.com/community/file/1293288155415213351/material-ui-for-figma', + icon: ( + Figma logo + ), + }, +]; + +export default function MaterialStartingLinksCollection() { + return ( + + {content.map(({ icon, title, description, link }) => ( + + + + ))} + + ); +} From 3170470ca0d656bd6c644f14413be1aa2bf3c985 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 16 Feb 2024 13:43:05 -0300 Subject: [PATCH 2/2] fix Figma Community link --- docs/src/modules/components/MaterialStartingLinksCollection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js index 2024d375e25f8c..bd6e06ca553e3a 100644 --- a/docs/src/modules/components/MaterialStartingLinksCollection.js +++ b/docs/src/modules/components/MaterialStartingLinksCollection.js @@ -41,7 +41,7 @@ const content = [ { title: 'Design resources', description: 'The Material UI components in your favorite design tool.', - link: 'https://www.figma.com/community/file/1293288155415213351/material-ui-for-figma', + link: 'https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x', icon: (