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.
UI components
These components are built with remote-ui. For the equivalents used in newer API versions, see web components.
UI components are the building blocks that you use to display data and trigger API functions in customer account UI extensions. These components follow Shopify's design system and render optimized interfaces for workflows in customer accounts.
Your target determines which components you can use because different locations in the customer account have different interface requirements and constraints.
You can't override the CSS for UI components. The customer account UI will always render the merchant's own branding. Customer account UI extensions don't have access to the real customer account DOM and can't render arbitrary HTML. They can only render custom HTML elements provided by Shopify.
You can't override the CSS for UI components. The customer account UI will always render the merchant's own branding. Customer account UI extensions don't have access to the real customer account DOM and can't render arbitrary HTML. They can only render custom HTML elements provided by Shopify.
Anchor to ActionsActions
Actions enable users to perform tasks and navigate through the customer account interface with interactive elements like buttons and links.
Button
Trigger actions or events, such as submitting forms, opening dialogs, or navigating to other pages.
Clipboard
Copy text or data to the clipboard when activated.
Customer
Define the title and action buttons that appear in customer account action extension surfaces.
Link
Make text interactive, allowing users to navigate to other pages or perform specific actions.
Menu
Display a list of actions that users can perform on a resource.
Pressable
Make any content interactive and trigger actions when pressed.
Resource
Display a resource with associated actions in a list format.
Anchor to Feedback and status indicatorsFeedback and status indicators
Feedback and status indicators communicate system states, progress, and important information to users.
Badge
Use color and text to communicate the state of orders, fulfillments, and other business data.
Banner
Highlight important information or required actions prominently within the interface.
Progress
Display progress through a series of steps or stages.
Spinner
Display an animated indicator to show that content or actions are loading.
Anchor to FormsForms
Forms capture and validate user input with specialized field types optimized for different data collection needs in the customer account.
Checkbox
Capture user selections, such as agreeing to terms or choosing multiple items from a list.
Choice
Present a single option within a choice list.
Choice
Present multiple options for single or multiple selections.
Consent
Capture consent from customers with a checkbox and associated terms.
Consent
Capture phone numbers with associated consent agreements.
Date
Capture date input with a consistent interface for date selection and proper validation.
Date
Allow customers to select a specific date using a calendar-like picker interface.
Drop
Accept file uploads through drag-and-drop or button activation.
Form
Wrap form controls and enable implicit submission when users press Enter.
Phone
Capture phone number input with built-in formatting and validation.
Select
Enable users to pick one option from a dropdown menu.
Stepper
Capture numeric input with increment and decrement controls.
Switch
Toggle options on or off.
Text
Capture single-line text input.
Toggle
Toggle between two states with a button.
Toggle
Display a group of toggle buttons for selecting options.
Anchor to Layout and structureLayout and structure
Layout and structure components organize content hierarchically and spatially, creating clear visual relationships in customer account interfaces.
Block
Organize content in vertical blocks with consistent spacing.
Block
Add vertical spacing between elements.
Block
Organize elements vertically with consistent spacing between items.
Card
Group related content in a visually distinct container.
Divider
Create visual separation between content sections.
Grid
Organize content in a matrix of rows and columns to build responsive layouts.
Grid
Define an item within a grid layout.
Inline
Organize content horizontally with consistent spacing.
Inline
Add horizontal spacing between elements.
Inline
Organize elements horizontally with consistent spacing between items.
Page
Configure the top-level page layout for full-page extensions.
Scroll
Create a scrollable container for overflowing content.
Style
Apply responsive styles to child elements based on container size.
View
Display a generic container with consistent spacing and styling.
Anchor to Media and visualsMedia and visuals
Media and visuals display images, icons, and graphical elements that enhance comprehension and visual communication in the customer account.
Avatar
Display a user's profile image or initials.
Icon
Display standardized visual symbols to represent actions, statuses, or categories consistently.
Image
Add visual content to the interface and customize the presentation of visuals.
Image
Display a collection of images in a grouped layout.
Map
Display an interactive map with location markers.
Map
Define a marker to display on a map.
Map
Display contextual information for a map marker.
Payment
Display standardized icons for payment methods.
Product
Display small preview images representing products.
QR
Generate and display QR codes for sharing links or data.
Skeleton
Display a placeholder for image content while data is loading.
Anchor to OverlaysOverlays
Overlays present content in floating or layered surfaces that appear above the main interface, useful for focused tasks, contextual information, and supplementary content.
Modal
Display content in a layer that overlays the main page, requiring user interaction before returning.
Popover
Display contextual content in a floating container anchored to a trigger element.
Sheet
Display supplementary content in a panel that slides in from the edge of the screen.
Tooltip
Display additional information in an overlay on hover or focus.
Anchor to Typography and contentTypography and content
Typography and content components present textual information with appropriate hierarchy, emphasis, and styling for clear communication.
Disclosure
Display a collapsible section that users can expand to reveal additional content.
Heading
Render hierarchical titles to communicate the structure and organization of page content.
Heading
Group headings with consistent spacing and hierarchy.
List
Display a list of items with consistent formatting.
List
Define an item within a list.
Skeleton
Display a placeholder for text content while data is loading.
Skeleton
Display a placeholder for a block of text content while data is loading.
Tag
Display a keyword or label for categorizing content.
Text
Display text with specific visual styles or tones.
Text
Display blocks of text that can contain inline elements.