Material Design: Components, Theming & Material You

Core Components

Action components:
  Button variants: Filled, Outlined, Text, Elevated, Tonal
  FAB (Floating Action Button): standard, small, large, extended
  Icon Button: standard, filled, tonal, outlined
  Segmented Button: single/multi select

Navigation:
  Navigation Bar  — bottom, 3-5 destinations (mobile)
  Navigation Rail — side, 3-7 destinations (tablet)
  Navigation Drawer — side panel, many destinations (desktop)
  Top App Bar: center-aligned, small, medium, large

Containment:
  Card variants: Elevated, Filled, Outlined
  Dialog: basic, full-screen
  Bottom Sheet: modal, standard
  Side Sheet: modal, standard (desktop)

Selection:
  Checkbox, Radio Button, Switch, Slider (continuous/discrete)
  Date Picker, Time Picker

Text input:
  Text Field: Filled, Outlined
  Search Bar, Search View

Feedback:
  Progress Indicator: linear, circular (determinate/indeterminate)
  Snackbar (brief message + optional action)
  Badge (notification count on icon)

Theming with Material Theme Builder

// Android — Material 3 with Jetpack Compose
// build.gradle: implementation("androidx.compose.material3:material3")

val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    // ...
)

val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    // ...
)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,   // Material You
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Material Web (Web Components)

<!-- Install -->
<!-- npm install @material/web -->

<link rel="stylesheet" href="@material/web/all.css">
<script type="module" src="@material/web/all.js"></script>

<!-- Buttons -->
<md-filled-button>Save</md-filled-button>
<md-outlined-button>Cancel</md-outlined-button>
<md-text-button>Learn more</md-text-button>

<!-- Text field -->
<md-outlined-text-field label="Email" type="email"></md-outlined-text-field>

<!-- Navigation bar -->
<md-navigation-bar>
  <md-navigation-tab label="Home"><md-icon slot="active-icon">home</md-icon></md-navigation-tab>
  <md-navigation-tab label="Favorites"><md-icon slot="active-icon">favorite</md-icon></md-navigation-tab>
</md-navigation-bar>

Tools & Resources

• Material Theme Builder (m3.material.io/theme-builder): generate color schemes from a seed color, export to Compose/Flutter/Web.

• Material Symbols: icon library with 2500+ icons, variable font (fill, weight, grade, optical size). Use as web font or Compose icons.

• Figma Material 3 Design Kit: official design file with all components, color tokens, and spacing specs.

• Material Design for Flutter (pub.dev/packages/material_design): Flutter ships MD3 natively in the Material library.

• MUI (mui.com): leading React implementation of Material Design. Use ThemeProvider + createTheme() for custom themes.

• Vuetify (vuetifyjs.com): Material Design component framework for Vue 3.