compose-preview Material 3 Design Kit

Material 3 Design Kit

m3-catalog

1368 preview(s) · 206 views · hold a card for a live session

compare SVG compare to Figma

Communication

Navigation

Containment

Actions

Selection

Styles

Shapes

Shape Corner scale
Shape Corner scale
shape-corner-scale__ideal__default__light
Shape Circle
Shape Circle
shape-circle__ideal__default__light
13 views
Shape Square
Shape Square
shape-square__ideal__default__light
8 views
Shape Slanted
Shape Slanted
shape-slanted__ideal__default__light
7 views
Shape Arch
Shape Arch
shape-arch__ideal__default__light
9 views
Shape Fan
Shape Fan
shape-fan__ideal__default__light
8 views
Shape Arrow
Shape Arrow
shape-arrow__ideal__default__light
6 views
Shape Semi Circle
Shape Semi Circle
shape-semicircle__ideal__default__light
6 views
Shape Oval
Shape Oval
shape-oval__ideal__default__light
10 views
Shape Pill
Shape Pill
shape-pill__ideal__default__light
6 views
Shape Triangle
Shape Triangle
shape-triangle__ideal__default__light
12 views
Shape Diamond
Shape Diamond
shape-diamond__ideal__default__light
8 views
Shape Clam Shell
Shape Clam Shell
shape-clamshell__ideal__default__light
7 views
Shape Pentagon
Shape Pentagon
shape-pentagon__ideal__default__light
5 views
Shape Gem
Shape Gem
shape-gem__ideal__default__light
6 views
Shape Very Sunny
Shape Very Sunny
shape-verysunny__ideal__default__light
7 views
Shape Sunny
Shape Sunny
shape-sunny__ideal__default__light
7 views
Shape Cookie4 Sided
Shape Cookie4 Sided
shape-cookie4sided__ideal__default__light
9 views
Shape Cookie6 Sided
Shape Cookie6 Sided
shape-cookie6sided__ideal__default__light
7 views
Shape Cookie7 Sided
Shape Cookie7 Sided
shape-cookie7sided__ideal__default__light
8 views
Shape Cookie9 Sided
Shape Cookie9 Sided
shape-cookie9sided__ideal__default__light
7 views
Shape Cookie12 Sided
Shape Cookie12 Sided
shape-cookie12sided__ideal__default__light
6 views
Shape Ghostish
Shape Ghostish
shape-ghostish__ideal__default__light
7 views
Shape Clover4 Leaf
Shape Clover4 Leaf
shape-clover4leaf__ideal__default__light
8 views
Shape Clover8 Leaf
Shape Clover8 Leaf
shape-clover8leaf__ideal__default__light
6 views
Shape Burst
Shape Burst
shape-burst__ideal__default__light
5 views
Shape Soft Burst
Shape Soft Burst
shape-softburst__ideal__default__light
7 views
Shape Boom
Shape Boom
shape-boom__ideal__default__light
11 views
Shape Soft Boom
Shape Soft Boom
shape-softboom__ideal__default__light
6 views
Shape Flower
Shape Flower
shape-flower__ideal__default__light
9 views
Shape Puffy
Shape Puffy
shape-puffy__ideal__default__light
8 views
Shape Puffy Diamond
Shape Puffy Diamond
shape-puffydiamond__ideal__default__light
9 views
Shape Pixel Circle
Shape Pixel Circle
shape-pixelcircle__ideal__default__light
7 views
Shape Pixel Triangle
Shape Pixel Triangle
shape-pixeltriangle__ideal__default__light
6 views
Shape Bun
Shape Bun
shape-bun__ideal__default__light
6 views
Shape Heart
Shape Heart
shape-heart__ideal__default__light
6 views

Text inputs

Text fields

Text Field Filled
Text Field Filled
textfield-filled__ideal__default__light
9 views
Text Field Outlined
Text Field Outlined
textfield-outlined__ideal__default__light
10 views
download all (.zip)
Catalog details Source, generation time and tooling
catalog yschimke/m3-catalog@design-artifacts/m3-catalog revision 5475a7b4 generated 2026-08-15 13:38 UTC rendered by compose-ai-tools 1.7.0 regenerate ↗
About this preview server How previews run and catalogs are trusted

Compose Multiplatform components can run in your browser using sandboxed Kotlin/Wasm; other previews are published as pre-rendered snapshots. The server never re-runs untrusted code. Catalogs are trusted by signature or their published design-artifacts branch, and anything unverified is badged.