# Module root

Compose Material 3

# Package androidx.compose.material3

Build Jetpack Compose UIs with <a href="https://m3.material.io" class="external" target="_blank">Material Design 3</a>, the next evolution of Material Design. Material 3 includes updated theming and components and Material You personalization features like dynamic color, and is designed to be cohesive with the new Android 12 visual style and system UI.

![Material You image](https://developer.android.com/images/reference/androidx/compose/material3/material-you.png)

In this page, you'll find documentation for types, properties, and functions available in the `androidx.compose.material3` package.

For more information, check out the <a href="https://developer.android.com/jetpack/compose/themes/material#material3" class="external" target="_blank">Material Design 3 and Material You</a> section in the Material Theming in Compose guide.

## Overview

### Theming

Material 3 makes brand expression in an interface simpler and more beautiful than ever before, with <a href="https://m3.material.io/styles/color/overview" class="external" target="_blank">color</a> and <a href="https://m3.material.io/styles/typography/overview" class="external" target="_blank">typography</a> theming.

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Material Theming** | [MaterialTheme] | M3 theme |
| **Color scheme** | [ColorScheme] | M3 color scheme |
| **Dynamic color** | [dynamicLightColorScheme] | Dynamic light color scheme |
|  | [dynamicDarkColorScheme] | Dynamic dark color scheme |
| **Typography** | [Typography] | M3 type scale |

### Components

Material 3 Components are interactive building blocks for creating a user interface.

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Buttons** | [Button] | M3 filled button |
|  | [ElevatedButton] | M3 elevated button |
|  | [FilledTonalButton] | M3 filled tonal button |
|  | [OutlinedButton] | M3 outlined button |
|  | [TextButton] | M3 text button |
| **FAB** | [FloatingActionButton] | M3 FAB |
|  | [SmallFloatingActionButton] | M3 small FAB |
|  | [LargeFloatingActionButton] | M3 large FAB |
| **Extended FAB** | [ExtendedFloatingActionButton] | M3 extended FAB |
| **Dialogs** | [AlertDialog] | M3 basic dialog |
| **Navigation bar** | [NavigationBar] | M3 navigation bar |
| **Navigation drawer** | [NavigationDrawer] | M3 navigation drawer |
| **Navigation rail** | [NavigationRail] | M3 navigation rail |
| **Top app bar** | [SmallTopAppBar] | M3 small top app bar |
|  | [CenterAlignedTopAppBar] | M3 center-aligned top app bar |
|  | [MediumTopAppBar] | M3 medium top app bar |
|  | [LargeTopAppBar] | M3 large top app bar |

### Surfaces and layout

Material 3 defines the qualities that can be expressed by UI regions, surfaces, and components.

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Surfaces** | [Surface] | M3 surface |
| **Layout** | [Scaffold] | Basic M3 visual layout structure |