Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

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

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?