Component library

Choose Insert in the rail to open Components. Search by name or by what you need, filter by category, then click a component to add it or drag it to the exact place on the page. Built-in holds the components below; Custom Components holds the ones you make.

Structure, space and scrolling. 10 components.

• ViewViewGroup components with flexible spacing and layout.
• Scroll viewScrollViewLet users scroll through content that does not fit at once.
• Safe areaSafeAreaViewKeep a group clear of notches and system bars.
• Keyboard avoidingKeyboardAvoidingViewMove form content out of the way of the keyboard.
• SpacerSpacerAdd an intentional empty gap between components.
• GridGridArrange content in equal-width columns.
• StackStackArrange a group from top to bottom.
• RowRowArrange a group side by side.
• CardCardGroup related content on a styled surface.
• DividerDividerSeparate adjacent groups with a subtle line.

Text, images and reusable content. 11 components.

• Flat listFlatListShow a scrolling list of designed items.
• Section listSectionListShow a scrolling list divided into named groups.
• List itemListItemA compact row with a title, supporting text and optional icons.
• CarouselCarouselLet users move between slides one at a time.
• AccordionAccordionLet users expand or collapse a group of content.
• ChipChipA compact label that can be selected or tapped.
• AvatarAvatarShow a profile image or fallback initials.
• TextTextShow headings, labels and readable body text.
• ImageImageShow a photo, illustration or other image.
• IconIconAdd a small symbol for meaning or decoration.
• BadgeBadgeShow a compact status label or count.

Forms, choices and user input. 17 components.

• PressablePressableMake a custom group respond to a tap.
• Text areaTextAreaCollect a message or other multi-line text.
• Search barSearchBarCollect search text with an optional clear button.
• Password inputPasswordInputCollect masked text with an optional reveal control.
• SwitchSwitchLet users turn one setting on or off.
• CheckboxCheckboxLet users select or clear an independent choice.
• Radio groupRadioGroupShow all choices and let users pick one.
• SelectSelectChoose one value from an expandable list.
• SliderSliderChoose a number by dragging along a range.
• StepperStepperIncrease or decrease a number with minus and plus buttons.
• Date pickerDatePickerChoose a calendar date.
• Time pickerTimePickerChoose a time of day.
• RatingRatingLet users choose a whole-star rating.
• Segmented controlSegmentedControlChoose one option from a compact row of buttons.
• Icon buttonIconButtonA tappable icon for a compact action.
• ButtonButtonA labeled control that performs an action when tapped.
• InputInputCollect a single line of user input.

Move through your app. 6 components.

• App barAppBarShow a page title with an optional leading action.
• Tab barTabBarLet users move between app pages.
• TabsTabsSwitch between groups of content within the current page.
• DrawerDrawerOpen a panel from the left or right side of the app.
• LinkLinkUse text to open a page, overlay or supported web address.
• MenuMenuOpen a list of labeled choices from a trigger.

States, messages and overlays. 8 components.

• ModalModalShow a focused panel above the current page.
• Bottom sheetBottomSheetShow a panel that opens from the bottom of the app.
• Activity indicatorActivityIndicatorShow that an operation is in progress.
• Progress barProgressBarShow progress as a percentage from 0 to 100.
• SkeletonSkeletonReserve space while content is loading.
• AlertAlertShow an important message inside the page.
• Empty stateEmptyStateExplain why an area is empty and what to do next.
• TooltipTooltipReveal a short explanation for a small trigger.

Camera, playback and native media. 8 components.

• Image backgroundImageBackgroundPlace text and other content over an image.
• VideoVideoPlay a selected video with platform playback controls.
• AudioAudioPlay an audio source with play and pause controls.
• Web viewWebViewShow an HTTPS website inside the app.
• Map viewMapViewShow a map centered on a chosen location.
• CameraCameraShow a live camera view and capture a photo.
• File pickerFilePickerLet users choose files from their device.
• Image pickerImagePickerChoose a photo from the library or take one with the system camera.

Pages are created in Pages rather than Insert. When the library cannot express something, build a custom component from your own layers, or write one in code.