> Deprecated:
> Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to [purchase options extensions](/docs/apps/build/purchase-options/purchase-options-extensions).
Resource items represent specific objects within a collection, such as products or orders. They provide contextual information on the resource type and link to the object’s detail page.
A `ResourceItem` should be rendered within a `ResourceList`.
```ts?title: "JavaScript"
import {extend, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions';
extend('Playground', (root) => {
const resourceItem1 = root.createComponent(ResourceItem, {
id: '1234',
onPress: () => console.log('Pressed 1'),
});
resourceItem1.appendChild('Cool item');
const resourceItem2 = root.createComponent(ResourceItem, {
id: '5678',
onPress: () => console.log('Pressed 2'),
});
resourceItem2.appendChild('Cooler item');
const resourceList = root.createComponent(ResourceList, {});
resourceList.appendChild(resourceItem1);
resourceList.appendChild(resourceItem2);
root.appendChild(resourceList);
root.mount();
});
```
```tsx?title: "React"
import React from 'react';
import {extend, render, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions-react';
function App() {
return (
console.log('Pressed 1')}>
Cool item
console.log('Pressed 2')}>
Cooler item
);
}
extend(
'Playground',
render(() => ),
);
```
## Props
optional = ?
| Name | Type | Description |
| --- | --- | --- |
| id | string
| Unique ID for the resource item. |
| onPress | () => void
| Callback when the resource item is pressed. |
## Behavior
- 📱 All children of ResourceItems are placed in a single view object, which makes recycling the views expensive. Consider making your ResourceItems simple.
- 📱 Any child of ResourceItem that has an `onPress` will take precedence and the `onPress` of ResourceItem will not be invoked
| ✅ Do | 🛑 Don't |
| ---------------------------------------------------------------------------- | ------------------------------------- |
| 📱 Keep ResourceItem shallow. Complex hierarchies have performance penalties | 📱 Use complex and deep Stack layouts |