New Compose Multiplatform components arrived on Composables UICheck it out →

Compose Multiplatform 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.3.0-beta04")
}

Components in Material 3 Compose

Discover all components available in Material 3 Compose

Basic dialog
image
AlertDialog
Assist chip
image
AssistChip
Badge
image
Badge
Badge
image
BadgedBox
Basic dialog
image
BasicAlertDialog
Bottom app bar
image
BottomAppBar
Bottom sheet
image
BottomSheetScaffold
Filled button
image
Button
Filled card
image
Card
Center-aligned top app bar
image
CenterAlignedTopAppBar
Checkbox
image
Checkbox
Circular progress indicator
image
CircularProgressIndicator
Date picker
image
DatePicker
material_design
DatePickerDialog
Date range picker
image
DateRangePicker
material_design
DismissibleDrawerSheet
Navigation drawer
image
DismissibleNavigationDrawer
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
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
FAB image
FloatingActionButton
Divider
image
HorizontalDivider
material_design
HorizontalMultiBrowseCarousel
material_design
HorizontalUncontainedCarousel
Standard icon button
image
IconButton
Standard icon toggle button
image
IconToggleButton
Input chip
image
InputChip
Large FAB
image
LargeFloatingActionButton
Large top app bar
image
LargeTopAppBar
material_design
LeadingIconTab
Linear progress indicator
image
LinearProgressIndicator
Lists
image
ListItem
material_design
MaterialTheme
Medium top app bar
image
MediumTopAppBar
Bottom sheet
image
ModalBottomSheet
material_design
ModalDrawerSheet
Navigation drawer
image
ModalNavigationDrawer
material_design
MultiChoiceSegmentedButtonRow
Navigation bar
image
NavigationBar
material_design
NavigationDrawerItem
Navigation rail
image
NavigationRail
material_design
NavigationRailItem
Outlined button
image
OutlinedButton
Outlined card
image
OutlinedCard
Outlined icon button
image
OutlinedIconButton
Outlined icon toggle button
image
OutlinedIconToggleButton
Outlined text field
image
OutlinedTextField
material_design
PermanentDrawerSheet
Navigation drawer
image
PermanentNavigationDrawer
material_design
PrimaryScrollableTabRow
material_design
PrimaryTabRow
material_design
ProvideTextStyle
material_design
PullToRefreshBox
Radio button
image
RadioButton
material_design
RangeSlider
material_design
ScrollableTabRow
Search bar
image
SearchBar
material_design
SecondaryScrollableTabRow
material_design
SecondaryTabRow
material_design
SingleChoiceSegmentedButtonRow
Sliders
image
Slider
Small FAB
image
SmallFloatingActionButton
Snackbar
image
Snackbar
material_design
SnackbarHost
Suggestion chip
image
SuggestionChip
material_design
SwipeToDismissBox
Switch
image
Switch
Tabs
image
Tab
Text button
image
TextButton
Filled text field
image
TextField
Time picker
image
TimePicker
material_design
TooltipBox
Small top app bar
image
TopAppBar
Checkbox
image
TriStateCheckbox
Divider
image
VerticalDivider

Modifiers in Material 3 Compose