Skip to content
IndexDesign corpus
Best in classDesign Systems & Brand GuidelinesPublic Design Systems
Design Systems & Brand GuidelinesDesign System DocsReferenceComponent LibraryApache 2.0FreeJetpack Compose

Material Design 3

Google's open design system: 39 components, tokens, and Compose/Web code

Visit resourceDocs
Aboutm3.material.io

Material Design 3 is Google's official design system documentation — foundations, styles (colour, typography, elevation, motion, icons), design tokens, and per-component specification pages. The sitemap lists 375 pages, of which 39 are components, plus implementation guides for Jetpack Compose, MDC-Android, Flutter and the Web. It is the canonical reference for anyone building Android UI or matching Google's visual language, and the M3 Expressive update is documented alongside it.

For an agent

Treat this as the spec, not the source — m3.material.io is a client-rendered Angular app that returns only 'This website requires JavaScript' to any fetcher, so read https://m3.material.io/sitemap.xml to enumerate pages and then pull the actual API surface from the Compose or material-web source instead. Reach for M3 over a generic web system whenever the target is Android or a Google-adjacent product, especially for dynamic colour and the design-token naming; do not use it for a Tailwind or shadcn app, where the token model will fight you. Note the vocabulary drift: M3 calls a bottom tab bar a 'navigation bar' and a snackbar a toast.

Why it is here. The most complete free design system on the web, and the only one that ships colour theory, motion specs, tokens, and shipping code for three platforms at once.

Install command, framework, licence and component list.
Components it ships39 total
App ShellHeaderToolbarBadgeSheetButton GroupButtonCardCarouselCheckboxChipDate PickerDialogSeparatorFloating Action ButtonIcon ButtonListSpinnerDropdown MenuTab BarSidebarNavigation DrawerProgress BarRadio ButtonSearch InputSegmented ControlDrawerSliderToastSplit ButtonSwitchTabsText InputTime PickerTooltip
Helps you build16
Onboarding MobileSettings MobileAccount MobileSearch MobileTab Bar NavigationAction SheetGesture NavigationFeedSingle Item DetailFiltering ItemsEmpty StateNotificationsChat MobileCamera CaptureUploading MediaShowing Input Error
Notable for
  • 39 specified components
  • dynamic colour and token system
  • Jetpack Compose, MDC-Android, Flutter and Web guides
  • M3 Expressive motion and theming
  • 375-page sitemap but zero server-rendered text
Provenance

Verified 2026-08-15. HTTP 200. WebFetch https://m3.material.io/ and https://m3.material.io/components (both returned title only — JS shell), curl https://m3.material.io/components (200, body is 'This website requires JavaScript'), curl + parse https://m3.material.io/sitemap.xml (375 URLs; 39 component slugs; top sections foundations/styles/components/develop/blog/m3-expressive), WebFetch https://m3.material.io/develop (title: 'Develop with Material Design 3 for Android & Web'), curl https://m3.material.io/llms.txt (404)

Related resourcesDesign Systems & Brand Guidelines