compose-preview M3 Wear OS Apps Design Kit

Status Sign in with GitHub

Settings

Page theme Match the preview theme Follow my system

Selecting a Light or Dark preview theme paints this page to match. Choose Follow my system to keep the page on your operating system's setting.

Keyboard Power-user navigation

Jump between components, variants, modes, and overrides with shortcuts and an on-screen command palette.

M3 Wear OS Apps Design Kit

wear-m3-catalog

482 previews · 189 views · hold a card for a live session

compare SVG compare to Figma design parity 76 motion captures try in playground

Horologist

Sign-in

Auth Sign In Button

Auth Sign In Button

auth-signinbutton__ideal__default

Auth Guest Mode Button

Auth Guest Mode Button

auth-guestmodebutton__ideal__default

Auth Select Account Screen

Auth Select Account Screen

auth-selectaccountscreen__ideal__default__192dp

Auth Sign In Placeholder Screen

Auth Sign In Placeholder Screen

auth-signinplaceholderscreen__ideal__default__192dp

Auth Signed In Confirmation Dialog

Auth Signed In Confirmation Dialog

auth-signedinconfirmationdialog__ideal__default__192dp

Fast scrolling

Fast Scrolling Transforming Lazy Column

Fast Scrolling Transforming Lazy Column

fastscrollingtransforminglazycolumn__ideal__default__192dp

Media controls

Media Player Screen

Media Player Screen

media-playerscreen__ideal__default__192dp

Media Footer Buttons

Media Footer Buttons

media-footerbuttons__ideal__default

Media Control Buttons

Media Control Buttons

media-controlbuttons__ideal__default

Media Podcast Control Buttons

Media Podcast Control Buttons

media-podcastcontrolbuttons__ideal__default

Media Play Pause Progress Button

Media Play Pause Progress Button

media-playpauseprogressbutton__ideal__default

Media Info Display

Media Info Display

media-infodisplay__ideal__default

Media Show Playlist Button

Media Show Playlist Button

media-showplaylistbutton__ideal__default

Actions

Buttons

button-filled__ideal__default

Button Filled Variant

Button Filled Variant

button-filledvariant__ideal__default

button-tonal__ideal__default

Button Outlined

Button Outlined

button-outlined__ideal__default

button-child__ideal__default

button-compact__ideal__default

Button Image Background

Button Image Background

button-imagebackground__ideal__default

button-loading__ideal__default

buttongroup__ideal__default

Edge-hugging buttons

edgebutton__ideal__default

Icon buttons

Icon Button Filled

Icon Button Filled

iconbutton-filled__ideal__default

Icon Button Filled Variant

Icon Button Filled Variant

iconbutton-filledvariant__ideal__default

Icon Button Tonal

Icon Button Tonal

iconbutton-tonal__ideal__default

Icon Button Outlined

Icon Button Outlined

iconbutton-outlined__ideal__default

Icon Button Standard

Icon Button Standard

iconbutton-standard__ideal__default

textbutton__ideal__default

Containment

Cards

card__ideal__default

card-outlined__ideal__default

titlecard__ideal__default

appcard__ideal__default

Dialogs

alertdialog__ideal__default__192dp

Open On Phone Dialog

Open On Phone Dialog

openonphonedialog__ideal__default__192dp

Swipe to reveal

Swipe To Reveal Card

Swipe To Reveal Card

swipetoreveal-card__ideal__default__192dp

Swipe To Reveal Button

Swipe To Reveal Button

swipetoreveal-button__ideal__default__192dp

Layout

Lists and screens

Transforming Lazy Column

Transforming Lazy Column

transforminglazycolumn__ideal__default__192dp

scaffold__ideal__default__192dp

Selection

Pickers

datepicker__ideal__default__192dp

timepicker__ideal__default__192dp

picker__ideal__default__192dp

Selection buttons

Checkbox Button

Checkbox Button

checkboxbutton__ideal__default

switchbutton__ideal__default

radiobutton__ideal__default

Sliders and steppers

slider__ideal__default

stepper__ideal__default__192dp

Toggle buttons

Icon Toggle Button

Icon Toggle Button

icontogglebutton__ideal__default

Text Toggle Button

Text Toggle Button

texttogglebutton__ideal__default

Communication

Placeholders

Placeholder Button

Placeholder Button

placeholder-button__ideal__default

Placeholder Icon Button

Placeholder Icon Button

placeholder-iconbutton__ideal__default

Placeholder Card

Placeholder Card

placeholder-card__ideal__default

Progress indicators

Circular Progress Indicator

Circular Progress Indicator

circularprogressindicator__ideal__default__192dp

Segmented Circular Progress Indicator

Segmented Circular Progress Indicator

segmentedcircularprogressindicator__ideal__default

Arc Progress Indicator

Arc Progress Indicator

arcprogressindicator__ideal__default

Linear Progress Indicator

Linear Progress Indicator

linearprogressindicator__ideal__default

Styles

Shapes

Shape Material Shapes

Shape Material Shapes

shape-materialshapes__ideal__default

Text

Text

List Header

listheader__ideal__default

List Sub Header

List Sub Header

listsubheader__ideal__default

Text Body

text-body__ideal__default

Text Caption

text-caption__ideal__default

Time Text

timetext__ideal__default__192dp

download all (.zip)