compose-preview Material 3 Design Kit

Examples

0 of 25 components implemented · Open in Figma

Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets
Window size class=4. Large (1200-1599dp), Layout regions=None — no code behind this Window size class=4. Large (1200-1599dp), Layout regions=Navigation region — no code behind this Window size class=5. Extra-large (1600+dp), Layout regions=None — no code behind this Window size class=5. Extra-large (1600+dp), Layout regions=Navigation region — no code behind this Window size class=5. Extra-large (1600+dp), Layout regions=Navigation expanded — no code behind this Window size class=3. Expanded (840-1199p), Layout regions=None — no code behind this Window size class=3. Expanded (840-1199p), Layout regions=Navigation region — no code behind this Window size class=2. Medium (600-839dp), Layout regions=None — no code behind this Window size class=2. Medium (600-839dp), Layout regions=Navigation region — no code behind this Window size class=1. Compact (0-599dp), Layout regions=None — no code behind this Window size class=1. Compact (0-599dp), Layout regions=Navigation region — no code behind this Examples/Home-Mobile — no code behind this Examples/Upcoming-Mobile — no code behind this Examples/Detailed view-Mobile — no code behind this Examples/Reviews-Mobile — no code behind this Examples/Library-Mobile — no code behind this Examples/Gallery-Mobile — no code behind this Examples/Messaging-Mobile — no code behind this Examples/Gallery-Web — no code behind this Examples/Home-Web — no code behind this Examples/Upcoming-Web — no code behind this Examples/Library-Web — no code behind this Examples/Detailed view-Web — no code behind this Examples/Reviews-Web — no code behind this Examples/Messaging-Web — no code behind this
0 of 25 components implemented
Window size class=4. Large (1200-1599dp), Layout regions=Noneno code behind this Window size class=4. Large (1200-1599dp), Layout regions=Navigation regionno code behind this Window size class=5. Extra-large (1600+dp), Layout regions=Noneno code behind this Window size class=5. Extra-large (1600+dp), Layout regions=Navigation regionno code behind this Window size class=5. Extra-large (1600+dp), Layout regions=Navigation expandedno code behind this Window size class=3. Expanded (840-1199p), Layout regions=Noneno code behind this Window size class=3. Expanded (840-1199p), Layout regions=Navigation regionno code behind this Window size class=2. Medium (600-839dp), Layout regions=Noneno code behind this Window size class=2. Medium (600-839dp), Layout regions=Navigation regionno code behind this Window size class=1. Compact (0-599dp), Layout regions=Noneno code behind this Window size class=1. Compact (0-599dp), Layout regions=Navigation regionno code behind this Examples/Home-Mobileno code behind this Examples/Upcoming-Mobileno code behind this Examples/Detailed view-Mobileno code behind this Examples/Reviews-Mobileno code behind this Examples/Library-Mobileno code behind this Examples/Gallery-Mobileno code behind this Examples/Messaging-Mobileno code behind this Examples/Gallery-Webno code behind this Examples/Home-Webno code behind this Examples/Upcoming-Webno code behind this Examples/Library-Webno code behind this Examples/Detailed view-Webno code behind this Examples/Reviews-Webno code behind this Examples/Messaging-Webno code behind this