---
title: ResourceItem
description: >-
The ResourceItem component represents a specific object within a collection
that a customer can take action on. Use it for lists of active subscriptions,
redeemable offers, or similar collections.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.
# ResourceItem
The ResourceItem component represents a specific object within a collection that a customer can take action on. Use it for lists of active subscriptions, redeemable offers, or similar collections in a style consistent with the order index page.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.profile.payment.render-after
#### Use cases
* **Subscription lists**: Display active subscriptions with management actions like "Skip order" or "Cancel."
* **Redeemable offers**: Show available offers or rewards that customers can redeem.
* **Order collections**: Present order-related items in a consistent grid layout with action buttons.
***
## Properties
Configure the following properties on the ResourceItem component.
* **accessibilityLabel**
**string**
A label that describes the purpose or content of the link for users of assistive technologies such as screen readers. When set, any `children` supplied to this component won't be announced to screen reader users.
* **action**
**RemoteFragment**
The action grouping for the item, provided as buttons.
* **actionAccessibilityLabel**
**string**
**Default: "More actions"**
Accessibility label for the action grouping. If an accessibility label is not provided, default text is used.
* **actionLabel**
**string**
**Default: "More actions"**
Label for the action grouping. If a label is not provided, default text is used.
* **loading**
**boolean**
**Default: false**
Indicates that the item is in a loading state.
When `true`, the item shows loading indicators for the UI elements that it is owns. The item is not responsible for the loading indicators of any content that is passed as `children`.
* **onPress**
**() => void**
A callback fired when the link is activated. If `to` is set, the callback fires first, then navigation occurs.
* **to**
**string**
The URL to navigate to when the link is activated. You must provide either this property, `onPress`, or both.
### Action button properties
Configure the following properties on the action button.
* **accessibilityLabel**
**string**
A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. When set, any `children` supplied to this component won't be announced to screen reader users.
* **disabled**
**boolean**
**Default: false**
Whether the button is disabled, preventing it from being activated or receiving focus.
* **kind**
**'primary' | 'secondary' | 'plain'**
**Default: 'primary'**
The visual style variant of the button, which controls its prominence and emphasis. The visual presentation is controlled through the Branding API.
* `'primary'`: High-emphasis style for main actions, such as "Continue to next step."
* `'secondary'`: Medium-emphasis style for secondary actions that don't block user progress, such as "Download Shop app."
* `'plain'`: Renders the button with a link-like appearance.
* **loading**
**boolean**
**Default: false**
Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.
* **loadingLabel**
**string**
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
* **onPress**
**() => void**
A callback fired when the button is activated by the user.
* **overlay**
**RemoteFragment**
An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.
* **to**
**string**
The URL to navigate to when the button is activated. The `onPress` callback fires first, then navigation occurs.
***
## Examples
### Display a resource item
Represent a single object in a collection with associated actions. This example shows a `ResourceItem` with product details and action buttons in a style consistent with the order index page.
## Display a resource item
## Display a resource item
##### React
```tsx
import {
ResourceItem,
Button,
Text,
View,
reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function App() {
return (
{}}
actionLabel="Manage"
action={
<>
}
>
Resource item content
);
}
```
##### JS
```js
import {
ResourceItem,
Button,
View,
extension,
} from '@shopify/ui-extensions/customer-account';
export default extension(
'customer-account.page.render',
(root, api) => {
renderApp(root, api);
},
)
function renderApp(root, api) {
const actionFragment = root.createFragment();
const primaryButton = root.createComponent(Button, {
kind: 'primary',
onPress: () => {},
});
primaryButton.append(root.createText('Pay now'))
const secondButton = root.createComponent(Button, {
kind: 'secondary',
onPress: () => {},
});
secondButton.append(root.createText('Second button'))
const thirdButton = root.createComponent(Button, {
kind: 'secondary',
onPress: () => {},
});
thirdButton.append(root.createText('Third button'))
actionFragment.append(primaryButton);
actionFragment.append(secondButton);
actionFragment.append(thirdButton);
const resourceItem = root.createComponent(
ResourceItem,
{
accessibilityLabel: 'Resource Item',
onPress: () => {},
actionLabel: 'Manage',
action: actionFragment,
},
'Content',
);
const view = root.createComponent(View, {maxInlineSize: 300});
view.append(resourceItem);
root.append(view);
}
```
***
## Best practices
* **Group related information**: Structure your content so it's easy for customers to scan to the most important information.
* **Use images to complement text**: Include product thumbnails or icons alongside text content.
* **Use a single primary action**: If there's one primary action for the object, display it as a primary button. Display other actions as secondary buttons.
* **Follow UX guidelines**: See [UX guidelines](https://shopify.dev/docs/apps/customer-accounts/order-action-menu-extensions/ux-guidelines) to learn more about the button logic for order actions.
***
## Limitations
* ResourceItem is designed for collection views. For standalone detail views, use other layout components instead.
***