Build apps faster with our new App builder! Check it out →

Jetpack Compose library

Material 3 Compose

"Material 3 Compose" is Google's latest iteration of Material Design tailored for Jetpack Compose. It introduces updated design principles, components, and interactions to create modern and visually appealing Android applications with ease and consistency.

Installation

dependencies {
  implementation("androidx.compose.material3:material3:1.4.0-alpha10")
}

Components in Material 3 Compose

Material 3 Compose contains 132 Jetpack Compose components:

Basic dialog
image

AlertDialog

Never start a Compose app from scratch ever again Over 150+ production ready components Browse components

Assist chip
image

AssistChip

Badge

BadgedBox

Basic dialog
image

BasicAlertDialog

Bottom app bar
image

BottomAppBar

Bottom sheet
image

BottomSheetScaffold

Filled button
image

Button

ButtonGroup

Filled card
image

Card

Center-aligned top app bar
image

CenterAlignedTopAppBar

Checkbox
image

Checkbox

Circular progress indicator
image

CircularProgressIndicator

Circular wavy progress indicator
image

CircularWavyProgressIndicator

Contained loading indicator
image

ContainedLoadingIndicator

Date picker
image

DatePicker

DatePickerDialog

Date range picker
image

DateRangePicker

DismissibleDrawerSheet

Navigation drawer
image

DismissibleNavigationDrawer

Divider

Search bar
image

DockedSearchBar

Dropdown menu
image

DropdownMenu

Dropdown menu
image

DropdownMenuItem

Assist chip
image

ElevatedAssistChip

Elevated button
image

ElevatedButton

Elevated card
image

ElevatedCard

Filter chip
image

ElevatedFilterChip

Suggestion chip
image

ElevatedSuggestionChip

ElevatedToggleButton

ExpandedDockedSearchBar

ExpandedFullScreenSearchBar

Exposed dropdown menu
image

ExposedDropdownMenuBox

Extended FAB
image

ExtendedFloatingActionButton

Filled icon button
image

FilledIconButton

Filled icon toggle button
image

FilledIconToggleButton

Filled tonal button
image

FilledTonalButton

Filled tonal icon button
image

FilledTonalIconButton

Filled tonal icon toggle button
image

FilledTonalIconToggleButton

Filter chip
image

FilterChip

FlexibleBottomAppBar

FAB image

FloatingActionButton

FloatingActionButtonMenu

Divider
image

HorizontalDivider

HorizontalFloatingToolbar

HorizontalMultiBrowseCarousel

HorizontalUncontainedCarousel

Icon

Standard icon button
image

IconButton

Standard icon toggle button
image

IconToggleButton

Input chip
image

InputChip

Label

LargeExtendedFloatingActionButton

Large top app bar
image

LargeFlexibleTopAppBar

Large FAB
image

LargeFloatingActionButton

Large top app bar
image

LargeTopAppBar

LeadingIconTab

Linear progress indicator
image

LinearProgressIndicator

Linear wavy progress indicator
image

LinearWavyProgressIndicator

Lists
image

ListItem

Loading indicator
image

LoadingIndicator

MaterialExpressiveTheme

MaterialTheme

MediumExtendedFloatingActionButton

Medium top app bar
image

MediumFlexibleTopAppBar

MediumFloatingActionButton

Medium top app bar
image

MediumTopAppBar

Bottom sheet
image

ModalBottomSheet

ModalDrawerSheet

Navigation drawer
image

ModalNavigationDrawer

ModalWideNavigationRail

MultiChoiceSegmentedButtonRow

Navigation bar
image

NavigationBar

NavigationDrawerItem

Navigation rail
image

NavigationRail

NavigationRailItem

Outlined button
image

OutlinedButton

Outlined card
image

OutlinedCard

Outlined icon button
image

OutlinedIconButton

Outlined icon toggle button
image

OutlinedIconToggleButton

OutlinedSecureTextField

Outlined text field
image

OutlinedTextField

OutlinedToggleButton

PermanentDrawerSheet

Navigation drawer
image

PermanentNavigationDrawer

PrimaryScrollableTabRow

PrimaryTabRow

ProvideTextStyle

PullToRefreshBox

Radio button
image

RadioButton

RangeSlider

Scaffold

ScrollableTabRow

Search bar
image

SearchBar

SecondaryScrollableTabRow

SecondaryTabRow

SecureTextField

ShortNavigationBar

ShortNavigationBarItem

SingleChoiceSegmentedButtonRow

Sliders
image

Slider

SmallExtendedFloatingActionButton

Small FAB
image

SmallFloatingActionButton

Snackbar
image

Snackbar

SnackbarHost

SplitButtonLayout

Suggestion chip
image

SuggestionChip

Surface

SwipeToDismissBox

Switch
image

Switch

Tabs
image

Tab

TabRow

Text

Text button
image

TextButton

Filled text field
image

TextField

TimeInput

Time picker
image

TimePicker

TimePickerDialog

ToggleButton

ToggleFloatingActionButton

TonalToggleButton

TooltipBox

Small top app bar
image

TopAppBar

Search bar
image

TopSearchBar

Checkbox
image

TriStateCheckbox

Two rows top app bar
image

TwoRowsTopAppBar

Divider
image

VerticalDivider

VerticalDragHandle

VerticalFloatingToolbar

Sliders
image

VerticalSlider

WideNavigationRail

WideNavigationRailItem

Modifiers in Material 3 Compose

Material 3 Compose contains 3 Jetpack Compose modifier(s):

animateFloatingActionButton minimumInteractiveComponentSize pullToRefresh

Sponsored by