Bookmark this page. Use Ctrl+F (or Cmd+F on Mac) to find what you need. This cheat sheet covers Jetpack Compose components, modifiers, state, navigation, and common patterns.
Last updated: April 2026
Core Composables Composable Usage Text("Hello") Display text Text("Bold", fontWeight = FontWeight.Bold) Styled text Button(onClick = { }) { Text("Click") } Clickable button OutlinedButton(onClick = { }) { Text("Outlined") } Outlined variant TextButton(onClick = { }) { Text("Text") } Text-only button IconButton(onClick = { }) { Icon(...) } Icon button TextField(value, onValueChange = { }) Text input field OutlinedTextField(value, onValueChange = { }) Outlined text input Image(painter, contentDescription) Display an image Icon(Icons.Default.Home, contentDescription) Material icon Checkbox(checked, onCheckedChange) Checkbox Switch(checked, onCheckedChange) Toggle switch RadioButton(selected, onClick) Radio button Slider(value, onValueChange) Slider CircularProgressIndicator() Loading spinner LinearProgressIndicator(progress) Progress bar HorizontalDivider() Horizontal divider line (replaces deprecated Divider()) Spacer(modifier = Modifier.height(16.dp)) Empty space Layouts // Column — vertical stack Column { Text("First") Text("Second") } // Row — horizontal stack Row { Text("Left") Spacer(Modifier.weight(1f)) Text("Right") } // Box — stack on top of each other Box { Image(...) // background Text("Overlay") // on top } // LazyColumn — scrollable vertical list (RecyclerView replacement) LazyColumn { items(list) { item -> Text(item.name) } } // LazyRow — scrollable horizontal list LazyRow { items(list) { item -> Card { Text(item.name) } } } // LazyVerticalGrid — grid layout LazyVerticalGrid(columns = GridCells.Fixed(2)) { items(list) { item -> Card { Text(item.name) } } } Common Modifiers Modifiers change the appearance and behavior of composables. Order matters — modifiers are applied top to bottom.
...