Skip to content
Index730 resources
Material Design 3

Material Design 3

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

Tier S · Best in classDesign System DocsReferenceComponent Librarym3.material.io

(Visit m3.material.io ↗)(Docs)
Preview image from m3.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.

Facts

License
Apache 2.0, CC BY, Trademark / trade dress restricted
Pricing
Free, Open source
Framework
Jetpack Compose, Flutter, Web Components
Styling
CSS custom properties, Platform-native styling
Distribution
GitHub repository, Figma file or kit, npm package
Platform
Android, Web, Cross-platform
Content type
Prose / writing, Design tokens / theme files, Figma / design source files, Code, Icons
Agent readiness
Client-rendered shell, Readable open source, Machine-readable index
Accessibility
WCAG 2.x AA, Contrast checked, Keyboard navigable, Accessible
Maturity
Actively maintained

Components it ships

39 total
App ShellHeaderToolbarBadgeSheetButton GroupButtonCardCarouselCheckboxChipDate PickerDialogSeparatorFloating Action ButtonIcon ButtonListSpinnerDropdown MenuTab BarSidebarNavigation DrawerProgress BarRadio ButtonSearch InputSegmented ControlDrawerSliderToastSplit ButtonSwitchTabsText InputTime PickerTooltip

Helps you build

16
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)

Also in Design Systems & Brand Guidelines

6
m3.material.ioTier S