Material Design Web
Explore components, samples, and layout recipes for building Material Design 3 interfaces.
Samples (starter pages)
Component gallery
Component
docs
Repository
Tip: start with Samples, then drill into individual components.
Component gallery
Build without custom CSS. Use layout primitives, gap-based spacing, and child
spans.
Samples
Hello World
Minimal layout + theme setup.
Form Example
Inputs, validation, and spacing.
Dashboard
Cards + grid layout.
PWA Shell
Root → page → pane → box → grid.
Foundations
Color
Tokens, palettes, and surfaces.
Shape
Radii, cut corners, and scale.
Typography
Typography
Type scale and alignment helpers.
Layout & structure
Root
App shell and layout regions.
Layout sample
Pane/page composition example.
Cards
Structured content surfaces.
Dividers
Section separation.
Controls & inputs
Buttons
Text, filled, outlined, FAB.
Checkbox
Single and grouped selections.
Radio Buttons
Single selection controls.
Switches
On/off controls.
Sliders
Continuous and discrete.
Text Input
Filled, outlined, combobox.
Text Select
Selectable input menus.
Text Area
Multi-line inputs.
Chips
Assist, filter, input chips.
Date Picker
Work in progress.
Navigation & lists
Top App Bar
Small, medium, large bars.
Bottom App Bar
Primary actions at the bottom.
Navigation Bar
Bottom navigation tabs.
Navigation Drawer
Standard, toned, minimal.
Navigation Rail
Side navigation patterns.
Tabs
Tab navigation and panels.
Menus
Basic, modal, checkbox, radio.
Lists
One to three line lists.
Listbox
Single and multi selection.
Search
Search bars and toolbars.
Feedback & overlays
Dialogs
Modal dialogs and actions.
Snackbar
Transient messages.
Progress Indicators
Linear and circular progress.
Tooltips
Hover and focus hints.
Badges
Notifications and counts.
Bottom Sheet
Modal and standard sheets.