# Admin UI extensions
Admin UI extensions make it possible to surface contextual app functionality within the Shopify Admin interface.

## Overview
Extend the Shopify Admin with UI Extensions.


- [Tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action): Get started building your first admin extension
- [Component APIs](/docs/api/admin-extensions/components): See all available components
- [Reference](/docs/api/admin-extensions/api/extension-targets): View a list of available extension targets
- [App authentication](#app-authentication): Make authenticated requests to your app's backend
- [Using Forms](#using-forms): Use the Form component to integrate with the contextual save bar of the resource page
- [Direct API access](#direct-api-access): Access the Shopify GraphQL API directly
- [Custom protocols](#custom-protocols): Easily construct URLs to navigate to common locations
- [UI reference](https://www.figma.com/community/file/1265417558571498993): Figma UI Kit
## Getting Started
Use the Shopify CLI to [generate a new extension](https://shopify.dev/apps/tools/cli/commands#generate-extension) within your app.

If you already have a Shopify app, you can skip right to the last command shown here.


### Generate an extension

```bash
# create an app if you don't already have one:
npm init @shopify/app@latest --name my-app

# navigate to your app's root directory:
cd my-app

# generate a new extension:
npm run generate extension
# follow the steps to create a new
# extension in ./extensions.

```


## App Authentication
Admin UI extensions can also make authenticated calls to your app's backend. When you use `fetch()` to make a request to your app's configured auth domain or any of its subdomains, an `Authorization` header is automatically added with a Shopify [OpenID Connect ID Token](https://shopify.dev/docs/api/app-bridge-library/reference/id-token). There's no need to manually manage ID tokens.

Relative URLs passed to `fetch()` are resolved against your app's `app_url`. This means if your app's backend is on the same domain as your `app_url`, you can make requests to it using `fetch('/path')`.

If you need to make requests to a different domain, you can use the [`auth.idToken()` method](/docs/api/admin-extensions/api/standard-api#standardapi-propertydetail-auth) to retrieve the ID token and manually add it to your request headers.


### Make requests to your app's backend

```tsx
import {reactExtension, useApi, Text} from '@shopify/ui-extensions-react/admin';
import {useEffect, useState} from 'react';

// Get product info from app backend
async function getProductInfo(id) {
  const res = await fetch(`/api/products/${id}`);
  return res.json();
}

const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, () => <App />);

function App() {
  // Contextual "input" data passed to this extension:
  const {data} = useApi(TARGET);
  const productId = data.selected?.[0]?.id;

  const [productInfo, setProductInfo] = useState();
  useEffect(() => {
    getProductInfo(productId).then(setProductInfo);
  }, [productId]);

  return <Text>Info: {productInfo?.title}</Text>;
}

```

```tsx
import {reactExtension, useApi, Text} from '@shopify/ui-extensions-react/admin';
import {useEffect, useState} from 'react';

// Get product info from a different app backend
async function getProductInfo(id, auth) {
  const token = await auth.idToken();
  const res = await fetch(`https://app.example.com/api/products/${id}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  return res.json();
}

const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, () => <App />);

function App() {
  // Contextual "input" data passed to this extension:
  const {data, auth} = useApi(TARGET);
  const productId = data.selected?.[0]?.id;

  const [productInfo, setProductInfo] = useState();
  useEffect(() => {
    getProductInfo(productId, auth).then(setProductInfo);
  }, [productId, auth]);

  return <Text>Info: {productInfo?.title}</Text>;
}

```


## Using Forms
When building a Block extension you may use the [Form component](https://shopify.dev/docs/api/admin-extensions/latest/components/forms/form) to integrate with the contextual save bar of the resource page. The Form component provides a way to manage form state and submit data to your app's backend or directly to Shopify using Direct API access.

Whenever an input field is changed, the Form component will automatically update the dirty state of the resource page. When the form is submitted or reset the relevant callback in the form component will get triggered.

Using this, you can control what defines a component to be dirty by utilizing the Input's defaultValue property.

Rules:

- When the defaultValue is set, the component will be considered dirty if the value of the input is different from the defaultValue.You may update the defaultValue when the form is submitted to reset the dirty state of the form.

- When the defaultValue is not set, the component will be considered dirty if the value of the input is different from the initial value or from the last dynamic update to the input's value that wasn't triggered by user input.


### Trigger the Form's dirty state

```tsx
import {useState} from 'react';
import {
  reactExtension,
  AdminBlock,
  BlockStack,
  TextField,
  NumberField,
  Form,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, () => <App />);

const defaultValues = {
  text: 'default value',
  number: 50,
};

function App() {
  const [textValue, setTextValue] = useState('');
  const [numberValue, setNumberValue] = useState('');

  return (
    <AdminBlock title="My Block Extension">
      <Form
        onSubmit={() => console.log('submit', {textValue, numberValue})}
        onReset={() => console.log('automatically reset values')}
      >
        <BlockStack>
          <TextField
            label="Default Value"
            defaultValue={defaultValues.text}
            value={textValue}
            onChange={setTextValue}
          />
          <NumberField
            label="Percentage field"
            defaultValue={defaultValues.number}
            value={numberValue}
            onChange={setNumberValue}
          />
        </BlockStack>
      </Form>
    </AdminBlock>
  );
}

```

```tsx
import {useState} from 'react';
import {
  reactExtension,
  AdminBlock,
  BlockStack,
  TextField,
  NumberField,
  Form,
} from '@shopify/ui-extensions-react/admin';

const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, async () => {
  const data = await fetch('/data.json');
  const {text, number} = await data.json();
  return <App text={text} number={number} />;
});

function App({text, number}) {
  // The initial values set in the form fields will be the default values
  const [textValue, setTextValue] = useState(text);
  const [numberValue, setNumberValue] = useState(number);

  return (
    <AdminBlock title="My Block Extension">
      <Form
        onSubmit={() => console.log('submit', {textValue, numberValue})}
        onReset={() => console.log('automatically reset values')}
      >
        <BlockStack>
          <TextField
            label="Default Value"
            value={textValue}
            onChange={setTextValue}
          />
          <NumberField
            label="Percentage field"
            value={numberValue}
            onChange={setNumberValue}
          />
        </BlockStack>
      </Form>
    </AdminBlock>
  );
}

```


## Direct API access
You can make Shopify Admin API requests directly from your extension using the [query API](/docs/api/admin-extensions/api/standard-api#standardapi-propertydetail-query) or the standard [web fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch)!

Any `fetch()` calls from your extension to Shopify's Admin GraphQL API are automatically authenticated by default. These calls are fast too, because Shopify handles requests directly.

Direct API requests use [online access](https://shopify.dev/docs/apps/build/authentication-authorization/access-token-types/online-access-tokens) mode by default. If you want to use [offline access](https://shopify.dev/docs/apps/build/authentication-authorization/access-token-types/offline-access-tokens) mode, you can set the `direct_api_mode` property to `offline` in your [app TOML file](/docs/apps/tools/cli/configuration#admin).

Note: Direct API can't be used to manage storefront access tokens.


### Query Shopify data

```tsx
import {reactExtension, useApi, Text} from '@shopify/ui-extensions-react/admin';
import {useEffect, useState} from 'react';

async function getProduct(id) {
  const res = await fetch('shopify:admin/api/graphql.json', {
    method: 'POST',
    body: JSON.stringify({
      query: `
        query GetProduct($id: ID!) {
          product(id: $id) {
            title
          }
        }
      `,
      variables: {id},
    }),
  });
  return res.json();
}

const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, () => <App />);

function App() {
  // Contextual "input" data passed to this extension:
  const {data} = useApi(TARGET);

  const [product, setProduct] = useState();
  useEffect(() => {
    const productId = data.selected?.[0]?.id;
    getProduct(productId).then(({data}) => setProduct(data.product));
  }, [data]);

  return <Text strong>The selected product title is {product?.title}</Text>;
}

```

```tsx
import {reactExtension, useApi, Text} from '@shopify/ui-extensions-react/admin';
import {useEffect, useState} from 'react';

const TARGET = 'admin.product-details.block.render';

export default reactExtension(TARGET, () => <App />);

function App() {
  // Contextual "input" data passed to this extension:
  const {data, query} = useApi(TARGET);

  const [product, setProduct] = useState();
  useEffect(() => {
    const productId = data.selected?.[0]?.id;
    query(
      `query GetProduct($id: ID!) {
          product(id: $id) {
            title
          }
        }
      `,
      {variables: {id: productId}},
    ).then(({data}) => setProduct(data.product));
  }, [data]);

  return <Text strong>The selected product title is {product?.title}</Text>;
}

```


- [Note](/docs/api/admin-extensions#direct-api-access): Direct API can't be used to manage storefront access tokens.
- [Developer guide](/docs/api/usage/access-scopes): Learn more about access scopes
## Custom Protocols
Custom protocols make it easier to navigate to common locations, and construct URLs.
### Shopify Protocol
Use the `shopify:admin` protocol when you want to construct a URL with a root of the Shopify Admin.
### shopify:admin

```tsx
<Link to="shopify:admin/products/1234567890" />;

```

```ts
fetch('shopify:admin/api/graphql.json', {
  method: 'POST',
  body: JSON.stringify(simpleProductQuery),
});

```


### App Protocol
Use the `app:` protocol to construct a URL for your app. Shopify will handle constructing the base URL for your app. This works for both embedded and non-embedded apps.
### app:

```tsx
<Link to="app:settings/advanced" />;

```


### Extension Protocol
Triggers an action extension from a block extension using the `extension:` protocol. The `extensionTarget` is the target of the action extension. The handle is the handle of the action extension that will be opened.
### extension:

```tsx
<Link to={`extension:${extension.handle}/${extensionTarget}`} />;

```


### Relative Urls
Relative urls are relative to your app and are useful when you want to link to a route within your app. This works for both embedded and non-embedded apps.
### /relative/urls

```tsx
<Link to={`/reviews/${product.id}`} />;

```




## Deploying
Use the Shopify CLI to [deploy your app and its extensions](https://shopify.dev/docs/apps/deployment/extension).


### Deploy an extension

```bash
# navigate to your app's root directory:
cd my-app

# deploy your app and its extensions:
npm run deploy

# follow the steps to deploy

```


## Security
UI Extensions run on a different origin than the Shopify Admin. For network calls to succeed, your server must support [cross-origin resource sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for the origin `https://extensions.shopifycdn.com`.

If you have a custom [`Access-Control-Allow-Origin` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) set, you must include `https://extensions.shopifycdn.com` in the list of allowed origins.

If you are using the [Shopify App Remix Template](https://github.com/Shopify/shopify-app-template-remix), this is done automatically for you.



## References
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2023-10/api/action-extension-api.txt): This API is available to all action extension types.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2023-10/api/block-extension-api.txt): This API is available to all block extension types.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/2023-10/api/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Extension Targets](https://shopify.dev/docs/api/admin-extensions/2023-10/api/extension-targets.txt): This is a list of all the available extension targets for Admin App Extensions.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/2023-10/api/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/2023-10/components/other/adminaction.txt): AdminAction is a component used by Admin Action extensions to configure a primary and secondary action and title.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/2023-10/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/2023-10/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/2023-10/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/2023-10/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/2023-10/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [Divider](https://shopify.dev/docs/api/admin-extensions/2023-10/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/2023-10/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/2023-10/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/2023-10/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/2023-10/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/2023-10/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/2023-10/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/2023-10/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [Select](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/2023-10/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/urlfield.txt): This is the right component for letting users enter a URL.
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2024-01/api/action-extension-api.txt): This API is available to all action extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action) for more information.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2024-01/api/block-extension-api.txt): This API is available to all block extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block) for more information.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/2024-01/api/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Extension Targets](https://shopify.dev/docs/api/admin-extensions/2024-01/api/extension-targets.txt): This is a list of all the available extension targets for Admin App Extensions.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/2024-01/api/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/2024-01/components/other/adminaction.txt): AdminAction is a component used by Admin Action extensions to configure a primary and secondary action and title.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/2024-01/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [Badge](https://shopify.dev/docs/api/admin-extensions/2024-01/components/titles-and-text/badge.txt): Use this component to inform merchants of the status of an object or of an action that’s been taken.
- [Banner](https://shopify.dev/docs/api/admin-extensions/2024-01/components/titles-and-text/banner.txt): Use this component if you need to communicate to merchants in a prominent way.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/2024-01/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/2024-01/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/2024-01/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/choicelist.txt): Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.
- [ColorPicker](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/colorpicker.txt): Use this component if you need to select a color.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/2024-01/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [DateField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/datefield.txt): This is a form field that lets users select a date using the DatePicker component.
- [DatePicker](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/datepicker.txt): Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
- [Divider](https://shopify.dev/docs/api/admin-extensions/2024-01/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/2024-01/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/2024-01/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/2024-01/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/2024-01/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/2024-01/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/2024-01/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [MoneyField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/moneyfield.txt): This is the right component for letting users enter Money digits.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [Paragraph](https://shopify.dev/docs/api/admin-extensions/2024-01/components/titles-and-text/paragraph.txt): Use this to display a block of text similar to the `<p>` tag in HTML.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/2024-01/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [ProgressIndicator](https://shopify.dev/docs/api/admin-extensions/2024-01/components/media/progressindicator.txt): Use this component to notify merchants that their action is being processed or loaded.
- [Select](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/2024-01/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/2024-01/components/forms/urlfield.txt): This is the right component for letting users enter a URL.
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2024-04/api/action-extension-api.txt): This API is available to all action extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action) for more information. Note that the [`AdminAction`](/docs/api/admin-extensions/components/other/adminaction) component is required to build Admin action extensions.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2024-04/api/block-extension-api.txt): This API is available to all block extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block) for more information.
- [Validation Settings API](https://shopify.dev/docs/api/admin-extensions/2024-04/api/validation-settings-api.txt): This API is available Validation Settings extensions. Refer to the [tutorial](/docs/apps/checkout/validation/create-complex-validation-rules) for more information. Note that the [`FunctionSettings`](/docs/api/admin-extensions/components/forms/functionsettings) component is required to build Validation Settings extensions.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/2024-04/api/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Extension Targets](https://shopify.dev/docs/api/admin-extensions/2024-04/api/extension-targets.txt): This is a list of all the available extension targets for Admin App Extensions.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/2024-04/api/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/2024-04/components/other/adminaction.txt): AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/2024-04/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [Badge](https://shopify.dev/docs/api/admin-extensions/2024-04/components/titles-and-text/badge.txt): Use this component to inform merchants of the status of an object or of an action that’s been taken.
- [Banner](https://shopify.dev/docs/api/admin-extensions/2024-04/components/titles-and-text/banner.txt): Use this component if you need to communicate to merchants in a prominent way.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/2024-04/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/2024-04/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/2024-04/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/choicelist.txt): Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.
- [ColorPicker](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/colorpicker.txt): Use this component if you need to select a color.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/2024-04/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [DateField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/datefield.txt): This is a form field that lets users select a date using the DatePicker component.
- [DatePicker](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/datepicker.txt): Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
- [Divider](https://shopify.dev/docs/api/admin-extensions/2024-04/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [FunctionSettings](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/functionsettings.txt): FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/2024-04/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/2024-04/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/2024-04/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/2024-04/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/2024-04/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/2024-04/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [MoneyField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/moneyfield.txt): This is the right component for letting users enter Money digits.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [Paragraph](https://shopify.dev/docs/api/admin-extensions/2024-04/components/titles-and-text/paragraph.txt): Use this to display a block of text similar to the `<p>` tag in HTML.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/2024-04/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [ProgressIndicator](https://shopify.dev/docs/api/admin-extensions/2024-04/components/media/progressindicator.txt): Use this component to notify merchants that their action is being processed or loaded.
- [Section](https://shopify.dev/docs/api/admin-extensions/2024-04/components/structure/section.txt): `Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.  `Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
- [Select](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/2024-04/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/2024-04/components/forms/urlfield.txt): This is the right component for letting users enter a URL.
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2024-07/api/action-extension-api.txt): This API is available to all action extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action) for more information. Note that the [`AdminAction`](/docs/api/admin-extensions/components/other/adminaction) component is required to build Admin action extensions.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2024-07/api/block-extension-api.txt): This API is available to all block extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block) for more information.
- [Validation Settings API](https://shopify.dev/docs/api/admin-extensions/2024-07/api/validation-settings-api.txt): This API is available to Validation Settings extensions. Refer to the [tutorial](/docs/apps/checkout/validation/create-complex-validation-rules) for more information. Note that the [`FunctionSettings`](/docs/api/admin-extensions/components/forms/functionsettings) component is required to build Validation Settings extensions.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/2024-07/api/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Print Action Extension API](https://shopify.dev/docs/api/admin-extensions/2024-07/api/print-action-extension-api.txt): This API is available to all print action extension types. Note that the [`AdminPrintAction`](/docs/api/admin-extensions/components/other/adminprintaction) component is required to build admin print action extensions.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/2024-07/api/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/2024-07/components/other/adminaction.txt): AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/2024-07/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [AdminPrintAction](https://shopify.dev/docs/api/admin-extensions/2024-07/components/other/adminprintaction.txt): AdminPrintAction is a component used by admin print action extensions to denote a URL to print. Admin print action extensions require the use of this component.
- [Badge](https://shopify.dev/docs/api/admin-extensions/2024-07/components/titles-and-text/badge.txt): Use this component to inform merchants of the status of an object or of an action that’s been taken.
- [Banner](https://shopify.dev/docs/api/admin-extensions/2024-07/components/titles-and-text/banner.txt): Use this component if you need to communicate to merchants in a prominent way.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/2024-07/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/2024-07/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/2024-07/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/choicelist.txt): Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.
- [ColorPicker](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/colorpicker.txt): Use this component if you need to select a color.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/2024-07/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [DateField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/datefield.txt): This is a form field that lets users select a date using the DatePicker component.
- [DatePicker](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/datepicker.txt): Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
- [Divider](https://shopify.dev/docs/api/admin-extensions/2024-07/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [FunctionSettings](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/functionsettings.txt): FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/2024-07/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/2024-07/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/2024-07/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/2024-07/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/2024-07/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/2024-07/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [MoneyField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/moneyfield.txt): This is the right component for letting users enter Money digits.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [Paragraph](https://shopify.dev/docs/api/admin-extensions/2024-07/components/titles-and-text/paragraph.txt): Use this to display a block of text similar to the `<p>` tag in HTML.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/2024-07/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [ProgressIndicator](https://shopify.dev/docs/api/admin-extensions/2024-07/components/media/progressindicator.txt): Use this component to notify merchants that their action is being processed or loaded.
- [Section](https://shopify.dev/docs/api/admin-extensions/2024-07/components/structure/section.txt): `Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.  `Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
- [Select](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/2024-07/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/2024-07/components/forms/urlfield.txt): This is the right component for letting users enter a URL.
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2024-10/api/action-extension-api.txt): This API is available to all action extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action) for more information. Note that the [`AdminAction`](/docs/api/admin-extensions/components/other/adminaction) component is required to build Admin action extensions.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2024-10/api/block-extension-api.txt): This API is available to all block extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block) for more information.
- [Validation Settings API](https://shopify.dev/docs/api/admin-extensions/2024-10/api/validation-settings-api.txt): This API is available to Validation Settings extensions. Refer to the [tutorial](/docs/apps/checkout/validation/create-complex-validation-rules) for more information. Note that the [`FunctionSettings`](/docs/api/admin-extensions/components/forms/functionsettings) component is required to build Validation Settings extensions.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/2024-10/api/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Print Action Extension API](https://shopify.dev/docs/api/admin-extensions/2024-10/api/print-action-extension-api.txt): This API is available to all print action extension types. Note that the [`AdminPrintAction`](/docs/api/admin-extensions/components/other/adminprintaction) component is required to build admin print action extensions.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/2024-10/api/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminaction.txt): AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [AdminPrintAction](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/adminprintaction.txt): AdminPrintAction is a component used by admin print action extensions to denote a URL to print. Admin print action extensions require the use of this component.
- [Badge](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/badge.txt): Use this component to inform merchants of the status of an object or of an action that’s been taken.
- [Banner](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/banner.txt): Use this component if you need to communicate to merchants in a prominent way.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/choicelist.txt): Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.
- [ColorPicker](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/colorpicker.txt): Use this component if you need to select a color.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/2024-10/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [DateField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datefield.txt): This is a form field that lets users select a date using the DatePicker component.
- [DatePicker](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/datepicker.txt): Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
- [Divider](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [FunctionSettings](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/functionsettings.txt): FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [MoneyField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/moneyfield.txt): This is the right component for letting users enter Money digits.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [Paragraph](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/paragraph.txt): Use this to display a block of text similar to the `<p>` tag in HTML.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/2024-10/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [ProgressIndicator](https://shopify.dev/docs/api/admin-extensions/2024-10/components/media/progressindicator.txt): Use this component to notify merchants that their action is being processed or loaded.
- [Section](https://shopify.dev/docs/api/admin-extensions/2024-10/components/structure/section.txt): `Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.  `Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
- [Select](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/2024-10/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/2024-10/components/forms/urlfield.txt): This is the right component for letting users enter a URL.
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/action-extension-api.txt): This API is available to all action extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action) for more information. Note that the [`AdminAction`](/docs/api/admin-extensions/components/other/adminaction) component is required to build Admin action extensions.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/block-extension-api.txt): This API is available to all block extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block) for more information.
- [Validation Settings API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/validation-settings-api.txt): This API is available to Validation Settings extensions. Refer to the [tutorial](/docs/apps/checkout/validation/create-complex-validation-rules) for more information. Note that the [`FunctionSettings`](/docs/api/admin-extensions/components/forms/functionsettings) component is required to build Validation Settings extensions.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Discount Function Settings API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/discount-function-settings-api.txt): This API is available to Discount Function Settings extensions. Refer to the [tutorial](/docs/apps/build/discounts/build-ui-extension) for more information. Note that the [`FunctionSettings`](/docs/api/admin-extensions/components/forms/functionsettings) component is required to build Discount Function Settings extensions.
- [Picker](https://shopify.dev/docs/api/admin-extensions/2025-01/api/picker.txt): Opens a Picker in your app
- [Print Action Extension API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/print-action-extension-api.txt): This API is available to all print action extension types. Note that the [`AdminPrintAction`](/docs/api/admin-extensions/components/other/adminprintaction) component is required to build admin print action extensions.
- [Resource Picker](https://shopify.dev/docs/api/admin-extensions/2025-01/api/resource-picker.txt): Opens a Resource Picker in your app
- [ShouldRender API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/shouldrender-api.txt): This API is available to all shouldRender extension types.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/2025-01/api/target-apis/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/2025-01/components/other/adminaction.txt): AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/2025-01/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [AdminPrintAction](https://shopify.dev/docs/api/admin-extensions/2025-01/components/other/adminprintaction.txt): AdminPrintAction is a component used by admin print action extensions to denote a URL to print. Admin print action extensions require the use of this component.
- [Badge](https://shopify.dev/docs/api/admin-extensions/2025-01/components/titles-and-text/badge.txt): Use this component to inform merchants of the status of an object or of an action that’s been taken.
- [Banner](https://shopify.dev/docs/api/admin-extensions/2025-01/components/titles-and-text/banner.txt): Use this component if you need to communicate to merchants in a prominent way.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/2025-01/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/2025-01/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/2025-01/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/choicelist.txt): Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.
- [ColorPicker](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/colorpicker.txt): Use this component if you need to select a color.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/2025-01/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [DateField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/datefield.txt): This is a form field that lets users select a date using the DatePicker component.
- [DatePicker](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/datepicker.txt): Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
- [Divider](https://shopify.dev/docs/api/admin-extensions/2025-01/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [FunctionSettings](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/functionsettings.txt): FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/2025-01/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/2025-01/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/2025-01/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/2025-01/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/2025-01/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/2025-01/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [MoneyField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/moneyfield.txt): This is the right component for letting users enter Money digits.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [Paragraph](https://shopify.dev/docs/api/admin-extensions/2025-01/components/titles-and-text/paragraph.txt): Use this to display a block of text similar to the `<p>` tag in HTML.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/2025-01/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [ProgressIndicator](https://shopify.dev/docs/api/admin-extensions/2025-01/components/media/progressindicator.txt): Use this component to notify merchants that their action is being processed or loaded.
- [Section](https://shopify.dev/docs/api/admin-extensions/2025-01/components/structure/section.txt): `Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.  `Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
- [Select](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/2025-01/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/2025-01/components/forms/urlfield.txt): This is the right component for letting users enter a URL.
- [Action Extension API](https://shopify.dev/docs/api/admin-extensions/unstable/api/action-extension-api.txt): This API is available to all action extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-action) for more information. Note that the [`AdminAction`](/docs/api/admin-extensions/components/other/adminaction) component is required to build Admin action extensions.
- [Block Extension API](https://shopify.dev/docs/api/admin-extensions/unstable/api/block-extension-api.txt): This API is available to all block extension types. Refer to the [tutorial](/docs/apps/admin/admin-actions-and-blocks/build-an-admin-block) for more information.
- [Validation Settings API](https://shopify.dev/docs/api/admin-extensions/unstable/api/validation-settings-api.txt): This API is available to Validation Settings extensions. Refer to the [tutorial](/docs/apps/checkout/validation/create-complex-validation-rules) for more information. Note that the [`FunctionSettings`](/docs/api/admin-extensions/components/forms/functionsettings) component is required to build Validation Settings extensions.
- [CustomerSegmentTemplate Extension API](https://shopify.dev/docs/api/admin-extensions/unstable/api/customersegmenttemplate-extension-api.txt): This API is available to all customer segment template extension types.
- [Print Action Extension API](https://shopify.dev/docs/api/admin-extensions/unstable/api/print-action-extension-api.txt): This API is available to all print action extension types. Note that the [`AdminPrintAction`](/docs/api/admin-extensions/components/other/adminprintaction) component is required to build admin print action extensions.
- [ShouldRender API](https://shopify.dev/docs/api/admin-extensions/unstable/api/shouldrender-api.txt): This API is available to all shouldRender extension types.
- [Standard API](https://shopify.dev/docs/api/admin-extensions/unstable/api/standard-api.txt): This API is available to all extension types.
- [AdminAction](https://shopify.dev/docs/api/admin-extensions/unstable/components/other/adminaction.txt): AdminAction is a component used by Admin action extensions to configure a primary and secondary action and title. Use of this component is required in order to use Admin action extensions.
- [AdminBlock](https://shopify.dev/docs/api/admin-extensions/unstable/components/other/adminblock.txt): This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.
- [AdminPrintAction](https://shopify.dev/docs/api/admin-extensions/unstable/components/other/adminprintaction.txt): AdminPrintAction is a component used by admin print action extensions to denote a URL to print. Admin print action extensions require the use of this component.
- [Badge](https://shopify.dev/docs/api/admin-extensions/unstable/components/titles-and-text/badge.txt): Use this component to inform merchants of the status of an object or of an action that’s been taken.
- [Banner](https://shopify.dev/docs/api/admin-extensions/unstable/components/titles-and-text/banner.txt): Use this component if you need to communicate to merchants in a prominent way.
- [BlockStack](https://shopify.dev/docs/api/admin-extensions/unstable/components/structure/blockstack.txt): This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.
- [Box](https://shopify.dev/docs/api/admin-extensions/unstable/components/structure/box.txt): This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.
- [Button](https://shopify.dev/docs/api/admin-extensions/unstable/components/actions/button.txt): Use this component when you want to provide users the ability to perform specific actions, like saving data.
- [Checkbox](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/checkbox.txt): Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.
- [ChoiceList](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/choicelist.txt): Use this component if you need to group together a related list of interactive choices as radio buttons or checkboxes.
- [ColorPicker](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/colorpicker.txt): Use this component if you need to select a color.
- [CustomerSegmentTemplate](https://shopify.dev/docs/api/admin-extensions/unstable/components/other/customersegmenttemplate.txt): CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.
- [DateField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/datefield.txt): This is a form field that lets users select a date using the DatePicker component.
- [DatePicker](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/datepicker.txt): Date pickers let merchants choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Shopify.
- [Divider](https://shopify.dev/docs/api/admin-extensions/unstable/components/structure/divider.txt): Use this to create a clear visual separation between different elements in your user interface.
- [EmailField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/emailfield.txt): Use this when you need users to provide their email addresses.
- [Form](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/form.txt): Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [FunctionSettings](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/functionsettings.txt): FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.
- [Heading](https://shopify.dev/docs/api/admin-extensions/unstable/components/titles-and-text/heading.txt): Use this to display a title. It's similar to the h1-h6 tags in HTML
- [HeadingGroup](https://shopify.dev/docs/api/admin-extensions/unstable/components/titles-and-text/headinggroup.txt): This groups headings together, much like the hgroup element in HTML.
- [Icon](https://shopify.dev/docs/api/admin-extensions/unstable/components/media/icon.txt): This component renders an icon from a predefined list. Choose the one that suits your needs.
- [Image](https://shopify.dev/docs/api/admin-extensions/unstable/components/media/image.txt): Use this when you want to display an image.
- [InlineStack](https://shopify.dev/docs/api/admin-extensions/unstable/components/structure/inlinestack.txt): Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
- [Link](https://shopify.dev/docs/api/admin-extensions/unstable/components/actions/link.txt): This is an interactive component that directs users to a specified URL. It even supports custom protocols.
- [MoneyField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/moneyfield.txt): This is the right component for letting users enter Money digits.
- [NumberField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/numberfield.txt): This component is specifically designed for numeric data entry.
- [Paragraph](https://shopify.dev/docs/api/admin-extensions/unstable/components/titles-and-text/paragraph.txt): Use this to display a block of text similar to the `<p>` tag in HTML.
- [PasswordField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/passwordfield.txt): This component is for secure input, it obfuscates any text that users enter.
- [Pressable](https://shopify.dev/docs/api/admin-extensions/unstable/components/actions/pressable.txt): Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.
- [ProgressIndicator](https://shopify.dev/docs/api/admin-extensions/unstable/components/media/progressindicator.txt): Use this component to notify merchants that their action is being processed or loaded.
- [Section](https://shopify.dev/docs/api/admin-extensions/unstable/components/structure/section.txt): `Section` is a structural component that allows thematic grouping of content. Its visual style is contextual and controlled by Shopify, so a `Section` may look different depending on the component it is nested inside.  `Section` also automatically increases the heading level for its content to ensure a semantically correct heading structure in the document. To further increase the heading level inside the `Section`, consider nesting new `Section`s.
- [Select](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/select.txt): Use this when you want to give users a predefined list of options to choose from.
- [Text](https://shopify.dev/docs/api/admin-extensions/unstable/components/titles-and-text/text.txt): This component renders text. Remember, you can also add your own styling.
- [TextArea](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/textarea.txt): This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.
- [TextField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/textfield.txt): This is your go-to component when you need to let users input textual information.
- [URLField](https://shopify.dev/docs/api/admin-extensions/unstable/components/forms/urlfield.txt): This is the right component for letting users enter a URL.