--- 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)