Components
Every public element and guide, with a live demo, copyable code and the generated API on each page.
On this page
Components
Standalone elements for product pages, navigation and code.
Code block
Readable, copyable code samples with Google Sans Code and lightweight syntax colours.
<mnw-code-block>
Expressive tab bar
Rounded Material 3 expressive tabs for section navigation, built on Material Web tabs.
<mnw-expressive-tab-bar>
App showcase
Cards for a developer's Android apps, loaded from a JSON endpoint, each with a Google Play link.
<mnw-app-showcase>
Home view
A ready-made documentation home with an introduction, a Get started action and a built-in examples view.
<mnw-home>
App shell
The frame of a web app or admin console: a navigation drawer that is modal or permanent by width, a top app bar with the screen's title and actions, and the screen.
<mnw-app-shell> <mnw-navigation-item>
Navigation group
Expandable categories for an app shell drawer.
<mnw-navigation-group>
Site footer
A rounded copyright bar with optional social links.
<mnw-site-footer>
Product launcher
An apps button that opens favorite products, consoles and shortcuts, with admin redirects in their own section, editable favorites and local persistence.
<mnw-product-launcher>
Theme controls
A palette button and theme controls that generate Material 3 color roles from one source color, with a reusable HCT color picker and a saved preference.
<mnw-theme-button> <mnw-theme-controls> <mnw-color-picker> <mnw-hct-slider>
Marketing hub elements
The pieces of the marketing hub, usable on their own: shell, cards, controls, device frames, badges and the prototype page.
Marketing shell
The whole marketing hub page around an app's screen cards: top app bar, preview settings and the screen catalog.
<mnw-marketing-shell>
Screen card
A catalog card with a live app screen as its media, per-card theme and navigation toggles, and an Open action.
<mnw-screen-card>
Preview controls
The hub's preview settings toolbar: theme, system navigation, palette and device frame, with a reset.
<mnw-preview-controls>
Marketing top app bar
An identity-only app bar with the product icon and name.
<mnw-marketing-top-app-bar>
Device frame
Google's device art around a live screen: the Pixel 9 Pro XL, the Pixel 9 Pro Fold and the Pixelbook Go.
<mnw-device-frame>
Android preview
One declaration per app: the App Toolkit shell (app bars, bar, rail or drawer, insets, sheets) drawn around each marketing screen's content.
<mnw-android-screen>
Store and source badges
Google's official Get it on Google Play badge, unaltered, and a source-code link with GitHub's mark.
<mnw-play-badge> <mnw-github-badge>
Prototype layout
The prototype page's frame: the inspector panel on the leading side and a stage for the live screen.
<mnw-prototype-layout>
Screen inspector
The prototype page's side panel: the screen picker, view options, and each screen's own controls and presets.
<mnw-screen-inspector>
Documentation layout
The shell and navigation this site is built with. Exported, but internal candidates: their API may change before 1.0.
Docs shell and page
The page frame of a documentation site: a full-height shell, a sticky top app bar and a centred content column.
<mnw-docs-shell> <mnw-docs-top-app-bar> <mnw-docs-page>
Docs navigation
A vertical list of documentation sections and an "On this page" table of contents, with cancelable navigation events.
<mnw-docs-vertical-tabs> <mnw-docs-table-of-contents>
Drawer footer
Theme choices and policy links shared by the app and marketing shells.
<mnw-app-shell-footer>
Guides
Workflows that combine several APIs.
Build a marketing hub
From an app's screens to a live gallery, a prototype page, PNG captures and Remotion videos, with one source for all of them.
Marketing API
Every export of material-next-web-components/marketing.js, from the page controllers to the building blocks they are made of.