---
title: ListItem
description: |-
  List items are used as children of the `List` component.

  They usually begins with a bullet or a number.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/listitem
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/listitem.md
---

# List​Item

List items are used as children of the `List` component.

They usually begins with a bullet or a number.

### Examples

* #### Basic ListItem

  ##### React

  ```tsx
  import {
    reactExtension,
    List,
    ListItem,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <List>
        <ListItem>100% organic cotton</ListItem>
      </List>
    );
  }
  ```

  ##### JS

  ```js
  import {extension, List, ListItem} from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const list = root.createComponent(List, undefined, [
      root.createComponent(ListItem, undefined, '100% organic cotton'),
    ]);

    root.appendChild(list);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/listitem-default.png)

## Related

[Component - List](list)