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 |
