Skip to content
mtrl
.
/
Components
Components
Styles
Examples
Documentation
GitHub ↗
⌘
K
Components
Styles
Documentation
GitHub ↗
Components
Overview
Actions
Button
Icon button
Button group
Split button
FAB
Extended FAB
Selection & input
Checkbox
Switch
Radio buttons
Chips
Slider
Text field
Select
Search
Date picker
Time picker
Navigation
Navigation rail
Drawer
Tabs
Menu
Top app bar
Bottom app bar
Containment
Card
List
Carousel
Divider
Dialog
Bottom sheet
Side sheet
Communication
Badge
Progress
Loading indicator
Snackbar
Tooltip
mtrl · Material Design 3
MIT license
Icons:
Material Symbols
by Google,
Apache 2.0
Type:
Roboto
by Google,
OFL 1.1
Vanilla
Web Components
React
Vue
Svelte
SolidJS
CONTAINMENT / LIST
Documentation ↗
List
Explore Material list anatomy. Configure text lines, media, supporting actions, and selection.
Live preview
View code
Theme
Baseline
Neutral
Vibrant
Expressive
Fidelity
Content
Monochrome
Rainbow
Fruit salad
Ocean
Forest
Spring
Sunset
Autumn
Desert
Summer
Brownbeige
Sageivory
Tealcaramel
Highcontrast
Light
Dark
Copy code
CONFIGURATION
Reset
Layout
Text lines
1
2
3
Leading
none
icon
avatar
image
video
Trailing
none
text
icon
control
Dividers
none
full width
inset
Subheader
Content
Items
activities
places
Item count
3
5
Supporting text
Overline
Accessible label
Behavior
Selection
none
single
multi
Disable last item
First selected
Second selected
Third selected
Fourth selected
Fifth selected
Esc
mtrl