---
title: Web components
description: Web components for building consistent and accessible user interfaces in admin UI extensions.
api_version: 2026-01
api_name: admin-extensions
source_url:
  html: https://shopify.dev/docs/api/admin-extensions/latest/web-components
  md: https://shopify.dev/docs/api/admin-extensions/latest/web-components.md
---

# Web components

Web components are the UI building blocks that you use to display data and trigger API functions. These components are native UI elements that follow [Shopify's design system](https://shopify.dev/docs/apps/design) and render optimized interfaces for workflows in the [Shopify admin](https://shopify.dev/docs/apps/build/admin).

Your [target](https://shopify.dev/docs/api/admin-extensions/2026-01/targets) determines which components you can use because different locations in the Shopify admin have different interface requirements and constraints.

## Actions

Actions enable users to perform tasks and navigate through the Shopify admin interface with interactive elements like buttons and links.

[![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/button-CdGXJjN3.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/button-CdGXJjN3.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button)

[Button](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button)

[Trigger actions or events, such as submitting forms, opening dialogs, or navigating to other pages.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button)

[![Button group](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/buttongroup-cu3ttjUi.png)![Button group](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/buttongroup-cu3ttjUi.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button-group)

[Button group](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button-group)

[Display multiple related buttons in a single layout.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/button-group)

[![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-Bed6GEzq.png)![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-Bed6GEzq.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/clickable)

[Clickable](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/clickable)

[Make any content interactive with customizable styling such as backgrounds, padding, or borders.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/clickable)

[![Clickable chip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-chip-DZ4SAGYc.png)![Clickable chip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/clickable-chip-DZ4SAGYc.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/clickable-chip)

[Clickable chip](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/clickable-chip)

[Display interactive filters or tags that can be clicked or removed.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/clickable-chip)

[![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/link-BHZwxvD8.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/link-BHZwxvD8.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/link)

[Link](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/link)

[Make text interactive, allowing users to navigate to other pages or perform specific actions.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/link)

[![Menu](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/menu-70pxKMNc.png)![Menu](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/menu-70pxKMNc.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/menu)

[Menu](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/menu)

[Display a list of actions that users can perform on a resource.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/actions/menu)

## Feedback and status indicators

Feedback and status indicators communicate system states, progress, and important information to users.

[![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/badge-SrJGEQW5.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/badge-SrJGEQW5.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/badge)

[Badge](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/badge)

[Use color and text to communicate the state of orders, products, customers, and other business data.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/badge)

[![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/banner-CSc2_A0f.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/banner-CSc2_A0f.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/banner)

[Banner](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/banner)

[Highlight important information or required actions prominently within the interface.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/banner)

[![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/spinner-Bw4zIb82.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/spinner-Bw4zIb82.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/spinner)

[Spinner](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/spinner)

[Display an animated indicator to show that content or actions are loading.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/feedback-and-status-indicators/spinner)

## Forms

Forms capture and validate user input with specialized field types optimized for different data collection needs in the Shopify admin.

[![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/checkbox-DFmfCiT4.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/checkbox-DFmfCiT4.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/checkbox)

[Capture user selections, such as agreeing to terms or choosing multiple items from a list.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/checkbox)

[![Choice list](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/choicelist-B2TfAN9x.png)![Choice list](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/choicelist-B2TfAN9x.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/choice-list)

[Choice list](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/choice-list)

[Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/choice-list)

[![Color field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-field-7dgfIQZ-.png)![Color field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-field-7dgfIQZ-.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/color-field)

[Color field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/color-field)

[Capture color selections with a color picker or text input.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/color-field)

[![Color picker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-picker-Bqlxgb4e.png)![Color picker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/color-picker-Bqlxgb4e.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/color-picker)

[Color picker](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/color-picker)

[Enable users to select colors from a color palette.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/color-picker)

[![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datefield-PzzMeGH0.png)![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datefield-PzzMeGH0.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/date-field)

[Date field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/date-field)

[Capture date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/date-field)

[![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datepicker-DUgxVSZB.png)![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/datepicker-DUgxVSZB.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/date-picker)

[Date picker](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/date-picker)

[Allow merchants to select a specific date using a calendar-like picker interface.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/date-picker)

[![Drop zone](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/dropzone-AQpi4uGt.png)![Drop zone](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/dropzone-AQpi4uGt.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/drop-zone)

[Drop zone](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/drop-zone)

[Accept file uploads through drag-and-drop or button activation.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/drop-zone)

[![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/emailfield-vytm1uVt.png)![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/emailfield-vytm1uVt.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/email-field)

[Email field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/email-field)

[Capture email address input from customers with built-in validation.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/email-field)

[![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/form)

[Form](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/form)

[Wrap form controls and enable implicit submission when users press Enter.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/form)

[![Function settings](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)![Function settings](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/function-settings)

[Function settings](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/function-settings)

[Configure metafield settings for Shopify Functions with native save bar integration.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/function-settings)

[![Money field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/moneyfield-DbKmvaH-.png)![Money field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/moneyfield-DbKmvaH-.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/money-field)

[Money field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/money-field)

[Capture monetary values with built-in currency formatting and validation.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/money-field)

[![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/numberfield-DD00ugG1.png)![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/numberfield-DD00ugG1.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/number-field)

[Number field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/number-field)

[Capture numeric input with built-in validation.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/number-field)

[![Password field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/passwordfield-BE-5DANJ.png)![Password field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/passwordfield-BE-5DANJ.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/password-field)

[Password field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/password-field)

[Securely capture sensitive information.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/password-field)

[![Search field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/searchfield-FQ17iQis.png)![Search field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/searchfield-FQ17iQis.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/search-field)

[Search field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/search-field)

[Capture search terms using a single-line input field.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/search-field)

[![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/select-CQdXi2Yt.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/select-CQdXi2Yt.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/select)

[Select](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/select)

[Enable users to pick one option from a dropdown menu.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/select)

[![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/switch-DE4Jf452.png)![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/switch-DE4Jf452.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/switch)

[Switch](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/switch)

[Toggle options on or off.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/switch)

[![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textarea-DSTYqCxX.png)![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textarea-DSTYqCxX.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-area)

[Text area](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-area)

[Capture longer text content with a multi-line, resizable text input area.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-area)

[![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textfield-D5zp62-y.png)![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/textfield-D5zp62-y.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-field)

[Text field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-field)

[Capture single-line text input.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/text-field)

[![URL field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/urlfield-RWo1-vx2.png)![URL field](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/urlfield-RWo1-vx2.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/url-field)

[URL field](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/url-field)

[Capture URLs with built-in formatting and validation.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/forms/url-field)

## Layout and structure

Layout and structure components organize content hierarchically and spatially, creating clear visual relationships in Shopify admin interfaces.

[![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/box-CO_V79Xi.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/box-CO_V79Xi.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/box)

[Box](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/box)

[Display a generic container with consistent spacing and styling.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/box)

[![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/divider-CvqN_5Pv.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/divider-CvqN_5Pv.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/divider)

[Divider](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/divider)

[Create visual separation between content sections.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/divider)

[![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/grid-BsFCiU5f.png)![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/grid-BsFCiU5f.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/grid)

[Grid](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/grid)

[Organize content in a matrix of rows and columns to build responsive layouts.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/grid)

[![Ordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/ordered-list-DkWPfrjo.png)![Ordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/ordered-list-DkWPfrjo.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/ordered-list)

[Ordered list](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/ordered-list)

[Display a numbered list of items.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/ordered-list)

[![Query container](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/querycontainer-MHu2kB_y.png)![Query container](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/querycontainer-MHu2kB_y.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/query-container)

[Query container](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/query-container)

[Manage loading and error states for data queries.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/query-container)

[![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/section-C8sCHOz2.png)![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/section-C8sCHOz2.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/section)

[Section](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/section)

[Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/section)

[![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/stack-B6pqB8LL.png)![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/stack-B6pqB8LL.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/stack)

[Stack](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/stack)

[Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/stack)

[![Table](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/table-yQvi0Pxe.png)![Table](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/table-yQvi0Pxe.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/table)

[Table](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/table)

[Display data in rows and columns.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/table)

[![Unordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/unordered-list-HLaM9fir.png)![Unordered list](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/unordered-list-HLaM9fir.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/unordered-list)

[Unordered list](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/unordered-list)

[Display a bulleted list of items.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/unordered-list)

## Media and visuals

Media and visuals display images, icons, and graphical elements that enhance comprehension and visual communication in the Shopify admin.

[![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/avatar-BVCHBUf6.png)![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/avatar-BVCHBUf6.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/avatar)

[Avatar](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/avatar)

[Display a user's profile image or initials.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/avatar)

[![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/icon-a6puDp7d.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/icon-a6puDp7d.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/icon)

[Icon](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/icon)

[Display standardized visual symbols to represent actions, statuses, or categories consistently.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/icon)

[![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/image-BLpC50N2.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/image-BLpC50N2.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/image)

[Image](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/image)

[Add visual content to the interface and customize the presentation of visuals.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/image)

[![Thumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/thumbnail-DE81GcQz.png)![Thumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/thumbnail-DE81GcQz.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/thumbnail)

[Thumbnail](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/thumbnail)

[Display small preview images representing content, products, or media.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/media-and-visuals/thumbnail)

## Settings and templates

Settings and templates provide specialized components for configuring extension behavior and integration with Shopify admin contexts.

[![Admin action](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminaction-Dks_E1rR.png)![Admin action](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminaction-Dks_E1rR.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-action)

[Admin action](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-action)

[Define the title and action buttons that appear in action extension surfaces.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-action)

[![Admin block](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminblock-CMQlUaFH.png)![Admin block](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminblock-CMQlUaFH.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-block)

[Admin block](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-block)

[Configure block extension rendering on resource pages with height and overflow controls.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-block)

[![Admin print action](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminprintaction-DNTz_rKI.png)![Admin print action](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/adminprintaction-DNTz_rKI.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-print-action)

[Admin print action](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-print-action)

[Specify the URL to use when merchants trigger a print action extension.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/settings-and-templates/admin-print-action)

## Typography and content

Typography and content components present textual information with appropriate hierarchy, emphasis, and styling for clear communication.

[![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/chip-BfsVHJqK.png)![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/chip-BfsVHJqK.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/chip)

[Chip](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/chip)

[Display user-supplied keywords that label, organize, and categorize objects.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/chip)

[![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/heading-D2zFK9OA.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/heading-D2zFK9OA.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/heading)

[Heading](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/heading)

[Render hierarchical titles to communicate the structure and organization of page content.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/heading)

[![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/paragraph-BpokbBlU.png)![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/paragraph-BpokbBlU.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/paragraph)

[Paragraph](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/paragraph)

[Display blocks of text that can contain inline elements such as buttons, links, or emphasized text.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/paragraph)

[![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/text-Dd2oqkHC.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/text-Dd2oqkHC.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/text)

[Text](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/text)

[Display text with specific visual styles or tones.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/text)

[![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/tooltip-BXzVy986.png)![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/admin/components/tooltip-BXzVy986.png)](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/tooltip)

[Tooltip](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/tooltip)

[Display additional information in an overlay on hover or focus.](https://shopify.dev/docs/api/admin-extensions/latest/web-components/typography-and-content/tooltip)

***