Jetpack Compose · Material 3
A clean, searchable reference of 52 components with 82 copy-paste Kotlin examples — themed for light, dark, and Material You.
Easy to start
Three steps from "what does this look like?" to working Compose code.
Scan 52 components grouped by purpose, or search instantly with /.
See every variant rendered, with what it's for.
Grab idiomatic Compose and paste it into your app.
A closer look
Five emphasis levels from filled to text
Button(onClick = {}) { Text("Filled") }
FilledTonalButton(onClick = {}) { Text("Tonal") }
ElevatedButton(onClick = {}) { Text("Elevated") }
OutlinedButton(onClick = {}) { Text("Outlined") }
TextButton(onClick = {}) { Text("Text") }
Assist, filter, input, and suggestion chips
AssistChip(
onClick = {},
label = { Text("Settings") },
leadingIcon = { Icon(Icons.Filled.Settings, null, Modifier.size(18.dp)) }
)
Linear, radial, and sweep brushes
val colors = listOf(Color(0xFF6750A4), Color(0xFF7D5260), Color(0xFF386A20))
Box(
Modifier.size(80.dp).clip(RoundedCornerShape(16.dp))
.background(Brush.linearGradient(colors))
)
Box(
Modifier.size(80.dp).clip(RoundedCornerShape(16.dp))
.background(Brush.radialGradient(colors))
)
Box(
Modifier.size(80.dp).clip(RoundedCornerShape(16.dp))
.background(Brush.sweepGradient(colors))
)Rendered from the real composables — not hand-drawn mock-ups.
Real, idiomatic Compose you can drop into your app.
Each component themed across modes and dynamic color.
Verified pixel-for-pixel with Paparazzi.
Organized by purpose
From actions and navigation to gestures and graphics — jump straight to what you need.
Buttons, FABs, and other ways to trigger an action
3 componentsBadges, progress, snackbars, and dialogs
5 componentsCards, lists, sheets, and dividers that hold content
4 componentsBars, rails, drawers, tabs, and menus
7 componentsCheckboxes, switches, sliders, chips, and pickers
7 componentsTypography and text entry
2 componentsRow, Column, Box, and arrangement primitives
4 componentsLazy lists, grids, and pagers
5 componentsState, visibility, content, and transitions
5 componentsClick, drag, swipe, and scroll handling
6 componentsCanvas, brushes, shapes, and clipping
4 componentsAbout
A reference for Jetpack Compose and Material 3. It collects 52 components into 11 groups, each paired with focused examples and the exact Kotlin you'd write yourself.
The previews here are pixel-accurate screenshots — rendered from the actual composables and verified with Paparazzi snapshot tests, so what you copy is what you ship. For the fully interactive experience (tap, drag, animate), run the Android app.
52 components · 11 groups · 82 copy-paste examples.