Component library
Components
Browse the complete collection of Material 3 Expressive web components available for your web applications.
Material 3Web ComponentFramework agnostic
Motion communicates state and hierarchy. With reduced motion enabled, every example resolves to the same clear static state.
Inputs & Controls
m3-buttonFilled, elevated, tonal, outlined, text · sizes · loading state
m3-switchToggle on/off · disabled state · accessible
m3-checkboxChecked, unchecked, indeterminate · accessible
m3-radio-buttonRadio group management · accessible
m3-sliderContinuous & discrete · range support
m3-text-fieldFilled & outlined · validation · icon slots
m3-chipAssist, filter, input, suggestion variants
m3-search-barLeading & trailing slots · keyboard navigation
Navigation
m3-navigation-railCollapsible vertical nav · badge support · bottom slot
← visible on desktop
m3-navigation-barResponsive bottom nav · auto-layout switching
↓ visible on mobile
m3-tabsPrimary & secondary tabs · icon support
m3-menuAnchored popup · keyboard navigation · accessible
m3-fab-menuFloating action button with animated menu
m3-split-buttonPrimary action + dropdown · shape morphing
m3-icon-buttonStandard, filled, tonal, outlined · toggle · sizes
Surfaces & Feedback
m3-cardElevated, filled, outlined · media & action slots
m3-dividerFull-width, inset, middle · vertical · pulsing animation
m3-listOne, two, three lines · leading/trailing · staggered animation
m3-dialogModal · scrim overlay · focus trapping · keyboard dismiss
m3-tooltipPlain & rich variants · configurable placement
m3-progressLinear & circular · determinate & indeterminate
m3-loading-indicatorShape-morphing loading animation · contained variant
m3-top-app-barSmall, center-aligned, medium, large · scroll behaviors
m3-snackbarAuto-dismiss · action slot · entrance/exit animations
m3-badgeDot & count variants · wraps any element