Material You (Material 3) Components List - Jetpack Compose 2025
🧱 Basic UI Components
Component | Description |
---|---|
Text | Displays text |
Icon | Shows vector icons |
Image | Displays an image |
Divider | Horizontal line separator |
Spacer | Empty space |
🧩 Buttons
Component | Description |
---|---|
Button | Filled button |
OutlinedButton | Button with border |
TextButton | No border or background |
ElevatedButton | Button with elevation |
FilledTonalButton | Subtle variant of Button |
IconButton | Button for icons |
FloatingActionButton | Circular action button |
ExtendedFloatingActionButton | FAB with text + icon |
🧭 Navigation
Component | Description |
---|---|
NavigationBar | Bottom nav bar |
NavigationBarItem | Item inside bottom nav bar |
NavigationDrawer | Drawer layout (not yet official in Compose) |
NavigationRail | Vertical sidebar for large screens |
NavigationRailItem | Item in rail |
TabRow / ScrollableTabRow | Horizontal tabs |
Tab | Tab item |
🗃️ Surfaces & Containers
Component | Description |
---|---|
Card | Surface with elevation & shape |
Surface | Core container for elevation & theme |
Scaffold | Layout structure with top bar, FAB, etc. |
Sheet / ModalBottomSheet | Bottom drawer/modal sheet |
🧭 Top App Bars
Component | Description |
---|---|
TopAppBar | Collapsing/centered or small bars |
CenterAlignedTopAppBar | Centered title |
MediumTopAppBar | Medium height |
LargeTopAppBar | Large height, collapsible |
📋 Lists & Items
Component | Description |
---|---|
LazyColumn | Vertical scrolling list |
LazyRow | Horizontal scrolling list |
LazyGrid | Grid layout (experimental/Accompanist) |
ListItem | Pre-styled row item |
🔲 Input Components
Component | Description |
---|---|
TextField | Single-line input |
OutlinedTextField | Input with outlined border |
Checkbox | Boolean toggle |
RadioButton | Single choice among group |
Switch | On/off toggle |
Slider | Continuous numeric value |
RangeSlider | Select numeric range |
DropdownMenu | Popup list of choices |
ExposedDropdownMenuBox | Material 3 dropdown input |
🧭 Dialogs & Menus
Component | Description |
---|---|
AlertDialog | Confirmation dialogs |
Dialog | Custom modal |
DropdownMenu | Popup menu |
MenuItem | Item in a dropdown menu |
BottomSheetScaffold | Persistent bottom sheet |
🎨 Theming
Component / API | Description |
---|---|
MaterialTheme | Access colors, typography, shapes |
ColorScheme | M3 color palette |
Typography | Font styles |
Shape | Component shapes |
dynamicLightColorScheme / dynamicDarkColorScheme | Dynamic color |