---
api_version: 2024-01
api_name: checkout-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components'
  md: 'https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components.md'
---

# Components

## Actions

[![Button](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/button-thumbnail.png)![Button](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/button-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/button)

[Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/button)

[Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/button)

[![Link](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/link-thumbnail.png)![Link](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/link-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/link)

[Link](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/link)

[Link makes text interactive so customers can perform an action, such as navigating to another location.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/link)

[![Pressable](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/pressable-thumbnail.png)![Pressable](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/pressable-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/pressable)

[Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/pressable)

[Pressable is a generic interactive component.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/pressable)

## Feedback

[![Banner](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/banner-thumbnail.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/banner-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/banner)

[Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/banner)

[Use banners to communicate important messages to customers in a prominent way.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/banner)

[![SkeletonImage](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/skeletonimage-thumbnail.png)![SkeletonImage](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/skeletonimage-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletonimage)

[Skeleton​Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletonimage)

[SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletonimage)

[![SkeletonText](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/skeletontext-thumbnail.png)![SkeletonText](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/skeletontext-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontext)

[Skeleton​Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontext)

[SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontext)

[![SkeletonTextBlock](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/skeletontextblock-thumbnail.png)![SkeletonTextBlock](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/skeletontextblock-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontextblock)

[Skeleton​Text​Block](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontextblock)

[SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontextblock)

[![Spinner](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/spinner-thumbnail.png)![Spinner](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/spinner-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/spinner)

[Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/spinner)

[Spinner is used to notify buyers that their action is being processed.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/spinner)

## Forms

[![Checkbox](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/checkbox-thumbnail.png)![Checkbox](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/checkbox-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/checkbox)

[Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/checkbox)

[![Choice](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/choice-thumbnail.png)![Choice](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/choice-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choice)

[Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choice)

[Options inside a `ChoiceList`.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choice)

[![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/choicelist-thumbnail.png)![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/choicelist-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choicelist)

[Choice​List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choicelist)

[Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choicelist)

[![ConsentCheckbox](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/consent-checkbox-thumbnail.png)![ConsentCheckbox](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/consent-checkbox-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentcheckbox)

[Consent​Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentcheckbox)

[Use buyer consent checkboxes for collecting the buyer's approval for a given policy.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentcheckbox)

[![ConsentPhoneField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/consent-phonefield-thumbnail.png)![ConsentPhoneField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/consent-phonefield-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentphonefield)

[Consent​Phone​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentphonefield)

[Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentphonefield)

[![DateField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/datefield-thumbnail.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/datefield-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datefield)

[Use a date field to get a date input from a customer.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datefield)

[![DatePicker](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/datepicker-thumbnail.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/datepicker-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datepicker)

[The DatePicker component is a calendar picker UI that allows users to select a single date or a date range](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datepicker)

[![Form](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/form-thumbnail.png)![Form](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/form-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/form)

[Form](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/form)

[The form component should be used to wrap one or more form controls.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/form)

[![PhoneField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/phonefield-thumbnail.png)![PhoneField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/phonefield-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/phonefield)

[Phone​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/phonefield)

[A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/phonefield)

[![Select](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/select-thumbnail.png)![Select](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/select-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/select)

[Select](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/select)

[Selects let buyers choose one option from an options menu.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/select)

[![Stepper](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/stepper-thumbnail.png)![Stepper](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/stepper-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/stepper)

[Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/stepper)

[Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/stepper)

[![TextField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/textfield-thumbnail.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/textfield-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/textfield)

[Use a text field to get text input from a customer.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/textfield)

[![ToggleButton](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebutton-thumbnail.png)![ToggleButton](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebutton-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebutton)

[Toggle​Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebutton)

[Options inside a ToggleButtonGroup.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebutton)

[![ToggleButtonGroup](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebuttongroup-thumbnail.png)![ToggleButtonGroup](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebuttongroup-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebuttongroup)

[Toggle​Button​Group](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebuttongroup)

[`ToggleButtonGroup` allows you to make a single choice out of the number of options provided.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebuttongroup)

## Interactive

[![Disclosure](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/disclosure-thumbnail.png)![Disclosure](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/disclosure-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/disclosure)

[Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/disclosure)

[Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/disclosure)

[![Map](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/map-thumbnail.png)![Map](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/map-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/map)

[Map](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/map)

[Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/map)

[![MapMarker](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mapmarker-thumbnail.png)![MapMarker](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mapmarker-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mapmarker)

[Map​Marker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mapmarker)

[MapMarker represents a specific location or point of interest on a map.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mapmarker)

[![MapPopover](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mappopover-thumbnail.png)![MapPopover](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/mappopover-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mappopover)

[Map​Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mappopover)

[MapPopover provides additional information or context about a specific location or point of interest on a map.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mappopover)

## Media

[![Icon](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/icon-thumbnail.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/icon-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/icon)

[Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/icon)

[Icons are pictograms or graphic symbols.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/icon)

[![Image](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/image-thumbnail.png)![Image](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/image-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/image)

[Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/image)

[Image is used for large format, responsive images.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/image)

[![PaymentIcon](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/paymenticon-thumbnail.png)![PaymentIcon](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/paymenticon-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/paymenticon)

[Payment​Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/paymenticon)

[Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/paymenticon)

[![ProductThumbnail](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/productthumbnail-thumbnail.png)![ProductThumbnail](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/productthumbnail-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/productthumbnail)

[Product​Thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/productthumbnail)

[Product thumbnail is a representation of a product image.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/productthumbnail)

## Other

[![List](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/list-thumbnail.png)![List](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/list-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/list)

[List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/list)

[Lists display a set of related content.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/list)

[![ListItem](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/listitem-thumbnail.png)![ListItem](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/listitem-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/listitem)

[List​Item](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/listitem)

[List items are used as children of the `List` component.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/listitem)

[![Tag](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/tag-thumbnail.png)![Tag](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/tag-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/tag)

[Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/tag)

[A Tag is used to help label, organize or categorize objects.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/tag)

## Overlays

[![Modal](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/modal-thumbnail.png)![Modal](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/modal-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/modal)

[Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/modal)

[Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/modal)

[![Popover](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/popover-thumbnail.png)![Popover](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/popover-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/popover)

[Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/popover)

[Popovers are similar to tooltips.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/popover)

[![Tooltip](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/tooltip-thumbnail.png)![Tooltip](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/tooltip-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/tooltip)

[Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/tooltip)

[Tooltips are floating labels that briefly explain the function of a user interface element.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/tooltip)

## Structure

[![BlockLayout](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/blocklayout-thumbnail.png)![BlockLayout](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/blocklayout-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blocklayout)

[Block​Layout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blocklayout)

[BlockLayout is used to lay out content over multiple rows.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blocklayout)

[![BlockSpacer](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/blockspacer-thumbnail.png)![BlockSpacer](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/blockspacer-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockspacer)

[Block​Spacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockspacer)

[BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockspacer)

[![BlockStack](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/blockstack-thumbnail.png)![BlockStack](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/blockstack-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockstack)

[Block​Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockstack)

[BlockStack is used to vertically stack elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockstack)

[![Divider](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/divider-thumbnail.png)![Divider](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/divider-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/divider)

[Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/divider)

[A divider separates content and represents a thematic break between elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/divider)

[![Grid](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/grid-thumbnail.png)![Grid](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/grid-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/grid)

[Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/grid)

[Grid is used to lay out content in a matrix of rows and columns.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/grid)

[![GridItem](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/griditem-thumbnail.png)![GridItem](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/griditem-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/griditem)

[Grid​Item](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/griditem)

[GridItem can be used as children of Grid.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/griditem)

[![InlineLayout](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/inlinelayout-thumbnail.png)![InlineLayout](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/inlinelayout-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinelayout)

[Inline​Layout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinelayout)

[InlineLayout is used to lay out content over multiple columns.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinelayout)

[![InlineSpacer](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/inlinespacer-thumbnail.png)![InlineSpacer](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/inlinespacer-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinespacer)

[Inline​Spacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinespacer)

[InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinespacer)

[![InlineStack](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/inlinestack-thumbnail.png)![InlineStack](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/inlinestack-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinestack)

[Inline​Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinestack)

[InlineStack is used to lay out a horizontal row of elements.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinestack)

[![ScrollView](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/scrollview-thumbnail.png)![ScrollView](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/scrollview-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/scrollview)

[Scroll​View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/scrollview)

[ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/scrollview)

[![View](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/view-thumbnail.png)![View](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/view-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/view)

[View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/view)

[View is a generic container component.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/view)

## Titles and text

[![Heading](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/heading-thumbnail.png)![Heading](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/heading-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/heading)

[Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/heading)

[Headings control the visual style of headings.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/heading)

[![HeadingGroup](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/headinggroup-thumbnail.png)![HeadingGroup](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/headinggroup-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/headinggroup)

[Heading​Group](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/headinggroup)

[Heading group controls the heading level of headings nested within it, like H1, H2, H3.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/headinggroup)

[![Text](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/text-thumbnail.png)![Text](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/text-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/text)

[Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/text)

[Text is used to visually style and provide semantic value for a small piece of text content.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/text)

[![TextBlock](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/textblock-thumbnail.png)![TextBlock](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/textblock-thumbnail.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/textblock)

[Text​Block](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/textblock)

[Text block is used to render a block of text that occupies the full width available, like a paragraph.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/textblock)

## Utilities

[Style​Helper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/utilities/stylehelper)

[This is a helper for authoring conditional values for property styles.](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/utilities/stylehelper)