Find components for your Jetpack Compose apps
We extracted all components from Material 3 Compose, Material Compose and all the official Jetpack Compose libraries in one place. Find code examples and add them to your project.
![AcceptPrivacyScreen](/component-preview/components/application-ui/acceptprivacy/acceptprivacyscreen.png)
![Accordion](/component-preview/components/application-ui/accordions/accordion.png)
![AccordionWithCheckboxes](/component-preview/components/application-ui/accordions/accordionwithcheckboxes.png)
![AccordionWithChips](/component-preview/components/application-ui/accordions/accordionwithchips.png)
![Autocomplete](/component-preview/components/application-ui/autocomplete/autocomplete.png)
![AutocompleteWithIcons](/component-preview/components/application-ui/autocomplete/autocompletewithicons.png)
![AutocompleteWithImages](/component-preview/components/application-ui/autocomplete/autocompletewithimages.png)
![Avatar](/component-preview/components/application-ui/avatars/avatar.png)
![Avatar stack](/component-preview/components/application-ui/avatars/avatarstack.png)
![Avatar with indication](/component-preview/components/application-ui/avatars/storyavatar.png)
![BannersWithSnapping](/component-preview/components/application-ui/horizontallists/bannerswithsnapping.png)
![Basic table](/component-preview/components/application-ui/tables/basictable.png)
![Button with leading icon](/component-preview/components/application-ui/buttons/buttonwithleadingicon.png)
![Button with trailing icon](/component-preview/components/application-ui/buttons/buttonwithtrailingicon.png)
![CardGridWithCta](/component-preview/components/application-ui/grids/cardgridwithcta.png)
![CardWithPager](/component-preview/components/application-ui/cards/cardwithpager.png)
![CardsGrid](/component-preview/components/application-ui/grids/cardsgrid.png)
![Center aligned](/component-preview/components/application-ui/dialogs/centeraligneddialog.png)
![Center aligned with icon](/component-preview/components/application-ui/dialogs/centeraligneddialogwithicon.png)
![Center aligned with icon and input text](/component-preview/components/application-ui/dialogs/centeraligneddialogwithiconandinputtext.png)
![Checkbox](/component-preview/components/application-ui/checkboxes/checkbox.png)
![CheckboxCard](/component-preview/components/application-ui/cards/checkboxcard.png)
![CheckboxList](/component-preview/components/application-ui/checkboxes/checkboxlist.png)
![CheckboxWithLabel](/component-preview/components/application-ui/checkboxes/checkboxwithlabel.png)
![ChipWithLeadingIcon](/component-preview/components/application-ui/chips/chipwithleadingicon.png)
![ChipWithTrailingIcon](/component-preview/components/application-ui/chips/chipwithtrailingicon.png)
![ChoiceCompactCard](/component-preview/components/application-ui/cards/choicecompactcard.png)
![CommentsFeed](/component-preview/components/application-ui/feeds/commentsfeed.png)
![ContactCardsGrid](/component-preview/components/application-ui/grids/contactcardsgrid.png)
![ContentCard](/component-preview/components/application-ui/cards/contentcard.png)
![ConversationScreen](/component-preview/components/application-ui/chat/conversationscreen.png)
![CoverListWithSnapping](/component-preview/components/application-ui/horizontallists/coverlistwithsnapping.png)
![Date picker in Modal Dialog](/component-preview/components/application-ui/datepickers/datepickerdialog.png)
![Date range picker in Modal Dialog](/component-preview/components/application-ui/datepickers/daterangepickerdialog.png)
![DateInputButton](/component-preview/components/application-ui/forminputs/dateinputbutton.png)
![DateInputOutlined](/component-preview/components/application-ui/forminputs/dateinputoutlined.png)
![DateRangeInputOutlinedSingleField](/component-preview/components/application-ui/forminputs/daterangeinputoutlinedsinglefield.png)
![DateRangeInputOutlinedTwoFields](/component-preview/components/application-ui/forminputs/daterangeinputoutlinedtwofields.png)
![DialogOnLarge](/component-preview/components/application-ui/responsivelayouts/dialogonlarge.png)
![Disabled Text Field](/component-preview/components/application-ui/textfields/textinputdisabled.png)
![DisabledCheckboxWithLabel](/component-preview/components/application-ui/checkboxes/disabledcheckboxwithlabel.png)
![DiscussionFeed](/component-preview/components/application-ui/feeds/discussionfeed.png)
![Dropdown with icon button](/component-preview/components/application-ui/dropdowns/dropdownwithiconbutton.png)
![Dropdown with icons](/component-preview/components/application-ui/dropdowns/dropdownwithicons.png)
![Dropdown with separators](/component-preview/components/application-ui/dropdowns/dropdownwithseparators.png)
![ExpandableCard](/component-preview/components/application-ui/cards/expandablecard.png)
![ExpandableList](/component-preview/components/application-ui/expandablelists/expandablelist.png)
![ExpandableListWithCheckboxes](/component-preview/components/application-ui/expandablelists/expandablelistwithcheckboxes.png)
![ExpandableListWithFilterChips](/component-preview/components/application-ui/expandablelists/expandablelistwithfilterchips.png)
![FeatureShowcaseCard](/component-preview/components/application-ui/cards/featureshowcasecard.png)
![ForgotPasswordScreen](/component-preview/components/application-ui/forgotpassword/forgotpasswordscreen.png)
![FormLayoutFilled](/component-preview/components/application-ui/forms/formlayoutfilled.png)
![FormLayoutFilledWithIcons](/component-preview/components/application-ui/forms/formlayoutfilledwithicons.png)
![FormLayoutOutlined](/component-preview/components/application-ui/forms/formlayoutoutlined.png)
![FormLayoutOutlinedWithIcons](/component-preview/components/application-ui/forms/formlayoutoutlinedwithicons.png)
![FriendsProfileScreen](/component-preview/components/application-ui/profiledetails/friendsprofilescreen.png)
![Full-width tabs with icons](/component-preview/components/application-ui/tabs/fullwidthtabswithunderlineandicon.png)
![Full-width tabs with underline](/component-preview/components/application-ui/tabs/fullwidthtabswithunderline.png)
![GalleryProfileScreen](/component-preview/components/application-ui/profiledetails/galleryprofilescreen.png)
![HorizontalPagerIndicator](/component-preview/components/application-ui/utilities/horizontalpagerindicator.png)
![Icon button](/component-preview/components/application-ui/buttons/iconbutton.png)
![ItemListCard](/component-preview/components/application-ui/cards/itemlistcard.png)
![List with icons](/component-preview/components/application-ui/lists/iconlistview.png)
![List with menu](/component-preview/components/application-ui/lists/listviewwithmenu.png)
![List with sticky headers](/component-preview/components/application-ui/lists/listviewwithstickyheaders.png)
![List with swipe to dismiss](/component-preview/components/application-ui/lists/listviewwithswipetodismiss.png)
![List with truncated content](/component-preview/components/application-ui/lists/listviewwithtruncatedcontent.png)
![ListDetailLayout](/component-preview/components/application-ui/responsivelayouts/listdetaillayout.png)
![ListDetailLayoutWithSearchBar](/component-preview/components/application-ui/responsivelayouts/listdetaillayoutwithsearchbar.png)
![ManageAccountScreen](/component-preview/components/application-ui/profiledetails/manageaccountscreen.png)
![MultiselectAutocomplete](/component-preview/components/application-ui/autocomplete/multiselectautocomplete.png)
![MusicPlayerControls](/component-preview/components/application-ui/musicplayback/musicplayercontrols.png)
![MusicPlayerMini](/component-preview/components/application-ui/musicplayback/musicplayermini.png)
![MusicPlayerWithAlbumCoverAndSeekbar](/component-preview/components/application-ui/musicplayback/musicplayerwithalbumcoverandseekbar.png)
![NewsFeed](/component-preview/components/application-ui/feeds/newsfeed.png)
![NewsFeedWithSecondaryFeed](/component-preview/components/application-ui/feeds/newsfeedwithsecondaryfeed.png)
![Onboarding with pager](/component-preview/components/application-ui/onboarding/onepageonboardingscreenwithpager.png)
![Outlined button](/component-preview/components/application-ui/buttons/outlinedbutton.png)
![PermissionRequiredScreen](/component-preview/components/application-ui/requestpermission/permissionrequiredscreen.png)
![PhotoCollage](/component-preview/components/application-ui/grids/photocollage.png)
![PhotoGrid](/component-preview/components/application-ui/grids/photogrid.png)
![PhotoGridWithDetails](/component-preview/components/application-ui/grids/photogridwithdetails.png)
![PhotoGridWithListOnMobile](/component-preview/components/application-ui/grids/photogridwithlistonmobile.png)
![PhotosList](/component-preview/components/application-ui/horizontallists/photoslist.png)
![PlayButton](/component-preview/components/application-ui/musicplayback/playbutton.png)
![PostCard](/component-preview/components/application-ui/cards/postcard.png)
![Primary button](/component-preview/components/application-ui/buttons/primarybutton.png)
![ProfileCard](/component-preview/components/application-ui/cards/profilecard.png)
![ProfileCompactCard](/component-preview/components/application-ui/cards/profilecompactcard.png)
![RadioGroupHorizontal](/component-preview/components/application-ui/radiogroups/radiogrouphorizontal.png)
![RadioGroupVertical](/component-preview/components/application-ui/radiogroups/radiogroupvertical.png)
![RadioGroupWithLabel](/component-preview/components/application-ui/radiogroups/radiogroupwithlabel.png)
![RatingCard](/component-preview/components/application-ui/cards/ratingcard.png)
![Rounded tabs](/component-preview/components/application-ui/tabs/roundedtabs.png)
![Rounded tabs with icon](/component-preview/components/application-ui/tabs/roundedtabswithicon.png)
![Scrollable table](/component-preview/components/application-ui/tables/scrollabletable.png)
![SearchBar](/component-preview/components/application-ui/searchbars/searchbar.png)
![SearchBarFilled](/component-preview/components/application-ui/searchbars/searchbarfilled.png)
![SearchScreen](/component-preview/components/application-ui/search/searchscreen.png)
![Secondary button](/component-preview/components/application-ui/buttons/secondarybutton.png)
![SelectableChip](/component-preview/components/application-ui/chips/selectablechip.png)
![SettingsScreen](/component-preview/components/application-ui/settings/settingsscreen.png)
![SignInScreen](/component-preview/components/application-ui/signin/signinscreen.png)
![SignUpScreen](/component-preview/components/application-ui/signup/signupscreen.png)
![Simple](/component-preview/components/application-ui/buttongroups/simple.png)
![Simple List](/component-preview/components/application-ui/lists/listview.png)
![Simple dropdown](/component-preview/components/application-ui/dropdowns/simpledropdown.png)
![SimpleCardsGrid](/component-preview/components/application-ui/grids/simplecardsgrid.png)
![SimpleChip](/component-preview/components/application-ui/chips/simplechip.png)
![SimpleHistoryFeed](/component-preview/components/application-ui/feeds/simplehistoryfeed.png)
![SimpleToggle](/component-preview/components/application-ui/toggles/simpletoggle.png)
![Single page onboarding](/component-preview/components/application-ui/onboarding/onepageonboardingscreenwithfullpageimage.png)
![SocialProfileScreen](/component-preview/components/application-ui/profiledetails/socialprofilescreen.png)
![SocialProfilesGrid](/component-preview/components/application-ui/grids/socialprofilesgrid.png)
![SocialShareModal](/component-preview/components/application-ui/socialshare/socialsharemodal.png)
![SocialShareSheet](/component-preview/components/application-ui/socialshare/socialsharesheet.png)
![SocialShareWithImagePreviewScreen](/component-preview/components/application-ui/socialshare/socialsharewithimagepreviewscreen.png)
![Start aligned when large](/component-preview/components/application-ui/dialogs/startaligneddialog.png)
![Start aligned when large with icon](/component-preview/components/application-ui/dialogs/startaligneddialogwithicon.png)
![Start aligned when large with icon and text input](/component-preview/components/application-ui/dialogs/startaligneddialogwithiconandinputtext.png)
![StoriesList](/component-preview/components/application-ui/horizontallists/storieslist.png)
![SupportingPane](/component-preview/components/application-ui/responsivelayouts/supportingpane.png)
![SupportingPaneWithNarrowSidebar](/component-preview/components/application-ui/responsivelayouts/supportingpanewithnarrowsidebar.png)
![TabBar](/component-preview/components/application-ui/tabs/tabbar.png)
![Table with filtering](/component-preview/components/application-ui/tables/filterabletable.png)
![Table with pagination](/component-preview/components/application-ui/tables/paginatedtable.png)
![Table with selectable rows](/component-preview/components/application-ui/tables/selectabletable.png)
![Table with sortable headers](/component-preview/components/application-ui/tables/sortabletable.png)
![Tabs with underline](/component-preview/components/application-ui/tabs/tabswithunderline.png)
![Tabs with underline and icon](/component-preview/components/application-ui/tabs/tabswithunderlineandicon.png)
![Text Field](/component-preview/components/application-ui/textfields/textinput.png)
![Text Field with error](/component-preview/components/application-ui/textfields/textinputwitherror.png)
![Text Field with icon](/component-preview/components/application-ui/textfields/textinputwithicon.png)
![Text Field with prefix](/component-preview/components/application-ui/textfields/textinputwithprefix.png)
![Text Field with trailing icon](/component-preview/components/application-ui/textfields/textinputwithtrailingicon.png)
![Text button](/component-preview/components/application-ui/buttons/textbutton.png)
![ThreeColumnLayout](/component-preview/components/application-ui/responsivelayouts/threecolumnlayout.png)
![TimeInputButton](/component-preview/components/application-ui/forminputs/timeinputbutton.png)
![TimeInputOutlined](/component-preview/components/application-ui/forminputs/timeinputoutlined.png)
![TodoCard](/component-preview/components/application-ui/cards/todocard.png)
![ToggleSettingsScreen](/component-preview/components/application-ui/settings/togglesettingsscreen.png)
![ToggleWithLabel](/component-preview/components/application-ui/toggles/togglewithlabel.png)
![ToggleWithTitleAndDescription](/component-preview/components/application-ui/toggles/togglewithtitleanddescription.png)
![TraitsProfileScreen](/component-preview/components/application-ui/profiledetails/traitsprofilescreen.png)
![VisualCardWithAction](/component-preview/components/application-ui/cards/visualcardwithaction.png)
![With Pager and navigation](/component-preview/components/application-ui/onboarding/onepageonboardingscreenwithnavigationbuttons.png)
![With call to action](/component-preview/components/application-ui/bottomsheets/modalbottomsheetwithcalltoaction.png)
![With checkboxes](/component-preview/components/application-ui/bottomsheets/modalbottomsheetwithcheckboxes.png)
![With hidden columns on on mobile](/component-preview/components/application-ui/tables/hideabletable.png)
![With horizontal actions](/component-preview/components/application-ui/bottomsheets/modalbottomsheetwithhorizontalactions.png)
![With merging columns on on mobile](/component-preview/components/application-ui/tables/mergetable.png)
![With sticky header](/component-preview/components/application-ui/bottomsheets/modalbottomsheetwithverticalactionsandstickyheader.png)
![With vertical actions](/component-preview/components/application-ui/bottomsheets/modalbottomsheetwithverticalactions.png)
![WithDropdown](/component-preview/components/application-ui/buttongroups/withdropdown.png)
![WithIcons](/component-preview/components/application-ui/buttongroups/withicons.png)
![WithStats](/component-preview/components/application-ui/buttongroups/withstats.png)
![Basic dialog
image](/component-preview/material3/alertdialog.png)
![Assist chip
image](/component-preview/material3/assistchip.png)
![Badge
image](/component-preview/material3/badge.png)
![Badge
image](/component-preview/material3/badgedbox.png)
![Basic dialog
image](/component-preview/material3/basicalertdialog.png)
![Bottom app bar
image](/component-preview/material3/bottomappbar.png)
![Bottom sheet
image](/component-preview/material3/bottomsheetscaffold.png)
![Filled button
image](/component-preview/material3/button.png)
![Filled card
image](/component-preview/material3/card.png)
![Center-aligned top app bar
image](/component-preview/material3/centeralignedtopappbar.png)
![Checkbox
image](/component-preview/material3/checkbox.png)
![Circular progress indicator
image](/component-preview/material3/circularprogressindicator.png)
![Date picker
image](/component-preview/material3/datepicker.png)
![Date range picker
image](/component-preview/material3/daterangepicker.png)
![Navigation drawer
image](/component-preview/material3/dismissiblenavigationdrawer.png)
![Search bar
image](/component-preview/material3/dockedsearchbar.png)
![Dropdown menu
image](/component-preview/material3/dropdownmenu.png)
![Dropdown menu
image](/component-preview/material3/dropdownmenuitem.png)
![Assist chip
image](/component-preview/material3/elevatedassistchip.png)
![Elevated button
image](/component-preview/material3/elevatedbutton.png)
![Elevated card
image](/component-preview/material3/elevatedcard.png)
![Filter chip
image](/component-preview/material3/elevatedfilterchip.png)
![Suggestion chip
image](/component-preview/material3/elevatedsuggestionchip.png)
![Exposed dropdown menu
image](/component-preview/material3/exposeddropdownmenubox.png)
![Extended FAB
image](/component-preview/material3/extendedfloatingactionbutton.png)
![Filled icon button
image](/component-preview/material3/fillediconbutton.png)
![Filled icon toggle button
image](/component-preview/material3/filledicontogglebutton.png)
![Filled tonal button
image](/component-preview/material3/filledtonalbutton.png)
![Filled tonal icon button
image](/component-preview/material3/filledtonaliconbutton.png)
![Filled tonal icon toggle button
image](/component-preview/material3/filledtonalicontogglebutton.png)
![Filter chip
image](/component-preview/material3/filterchip.png)
![FAB image](/component-preview/material3/floatingactionbutton.png)
![Divider
image](/component-preview/material3/horizontaldivider.png)
![Standard icon button
image](/component-preview/material3/iconbutton.png)
![Standard icon toggle button
image](/component-preview/material3/icontogglebutton.png)
![Input chip
image](/component-preview/material3/inputchip.png)
![Large FAB
image](/component-preview/material3/largefloatingactionbutton.png)
![Large top app bar
image](/component-preview/material3/largetopappbar.png)
![Linear progress indicator
image](/component-preview/material3/linearprogressindicator.png)
![Lists
image](/component-preview/material3/listitem.png)
![Medium top app bar
image](/component-preview/material3/mediumtopappbar.png)
![Bottom sheet
image](/component-preview/material3/modalbottomsheet.png)
![Navigation drawer
image](/component-preview/material3/modalnavigationdrawer.png)
![Navigation bar
image](/component-preview/material3/navigationbar.png)
![Navigation rail
image](/component-preview/material3/navigationrail.png)
![Outlined button
image](/component-preview/material3/outlinedbutton.png)
![Outlined card
image](/component-preview/material3/outlinedcard.png)
![Outlined icon button
image](/component-preview/material3/outlinediconbutton.png)
![Outlined icon toggle button
image](/component-preview/material3/outlinedicontogglebutton.png)
![Outlined text field
image](/component-preview/material3/outlinedtextfield.png)
![Navigation drawer
image](/component-preview/material3/permanentnavigationdrawer.png)
![Radio button
image](/component-preview/material3/radiobutton.png)
![Search bar
image](/component-preview/material3/searchbar.png)
![Sliders
image](/component-preview/material3/slider.png)
![Small FAB
image](/component-preview/material3/smallfloatingactionbutton.png)
![Snackbar
image](/component-preview/material3/snackbar.png)
![Suggestion chip
image](/component-preview/material3/suggestionchip.png)
![Switch
image](/component-preview/material3/switch.png)
![Tabs
image](/component-preview/material3/tab.png)
![Text button
image](/component-preview/material3/textbutton.png)
![Filled text field
image](/component-preview/material3/textfield.png)
![Time picker
image](/component-preview/material3/timepicker.png)
![Small top app bar
image](/component-preview/material3/topappbar.png)
![Checkbox
image](/component-preview/material3/tristatecheckbox.png)
![Divider
image](/component-preview/material3/verticaldivider.png)
![Dialogs
image](/component-preview/material/alertdialog.png)
![Backdrop
image](/component-preview/material/backdropscaffold.png)
![App bars: bottom
image](/component-preview/material/bottomappbar.png)
![Bottom drawer
image](/component-preview/material/bottomdrawer.png)
![Bottom navigation
image](/component-preview/material/bottomnavigation.png)
![Standard bottom sheet
image](/component-preview/material/bottomsheetscaffold.png)
![Contained button
image](/component-preview/material/button.png)
![Cards
image](/component-preview/material/card.png)
![Checkboxes
image](/component-preview/material/checkbox.png)
![Circular progress indicator
image](/component-preview/material/circularprogressindicator.png)
![Dividers
image](/component-preview/material/divider.png)
![Menus
image](/component-preview/material/dropdownmenu.png)
![Extended floating action button
image](/component-preview/material/extendedfloatingactionbutton.png)
![Floating action button
image](/component-preview/material/floatingactionbutton.png)
![Tab image](/component-preview/material/leadingicontab.png)
![Linear progress indicator
image](/component-preview/material/linearprogressindicator.png)
![Lists
image](/component-preview/material/listitem.png)
![Modal bottom sheet
image](/component-preview/material/modalbottomsheetlayout.png)
![Modal drawer
image](/component-preview/material/modaldrawer.png)
![Navigation rail
image](/component-preview/material/navigationrail.png)
![Outlined button
image](/component-preview/material/outlinedbutton.png)
![Outlined text field
image](/component-preview/material/outlinedtextfield.png)
![Radio buttons
image](/component-preview/material/radiobutton.png)
![Scrollable tabs
image](/component-preview/material/scrollabletabrow.png)
![Sliders
image](/component-preview/material/slider.png)
![Snackbars
image](/component-preview/material/snackbar.png)
![Switches
image](/component-preview/material/switch.png)
![Tab image](/component-preview/material/tab.png)
![Fixed tabs
image](/component-preview/material/tabrow.png)
![Text button
image](/component-preview/material/textbutton.png)
![Filled text field
image](/component-preview/material/textfield.png)
![App bars: top
image](/component-preview/material/topappbar.png)
![Checkboxes
image](/component-preview/material/tristatecheckbox.png)
We extracted all components from Material 3 Compose, Material Compose and all the official Jetpack Compose libraries in one place. Find code examples and add them to your project.