Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

Choose a version:

ListItem

The list item component represents a single entry within a list. Use list item as a direct child of the List component.

List items automatically receive appropriate markers (bullets or numbers) from their parent list.

Support

Targets (25)

Supported targets

Anchor to ExamplesExamples

Anchor to Add an item to a listAdd an item to a list

Display a single entry within a list with automatic bullet or number markers. This example shows a list item as a child of a list component.

Add an item to a list

A list item component displaying a single entry within a list

Add an item to a list

import {

reactExtension,

List,

ListItem,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

<List>

<ListItem>100% organic cotton</ListItem>

</List>

);

}

import {extension, List, ListItem} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const list = root.createComponent(List, undefined, [

root.createComponent(ListItem, undefined, '100% organic cotton'),

]);

root.appendChild(list);

});

React

import {
  reactExtension,
  List,
  ListItem,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

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

JS

import {extension, List, ListItem} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const list = root.createComponent(List, undefined, [
    root.createComponent(ListItem, undefined, '100% organic cotton'),
  ]);

  root.appendChild(list);
});

Anchor to Best practicesBest practices

Keep content concise: Write short, parallel items that customers can scan quickly.
Use inside List only: List items must be direct children of a List component.

Anchor to LimitationsLimitations

Must be a direct child of a List component. Nesting outside a List breaks marker rendering.

Was this page helpful?