--- title: Components api_name: shop-minis source_url: html: https://shopify.dev/docs/api/shop-minis/components md: https://shopify.dev/docs/api/shop-minis/components.md --- # Components ## Commerce [![AddToCartButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/AddToCartButton-DURzwURn.png)![AddToCartButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/AddToCartButton-DURzwURn.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton) [Add​To​Cart​Button](https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton) [Adds products to Shop's cart with checkmark animation feedback.](https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton) [![BuyNowButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/BuyNowButton-BfqFltBR.png)![BuyNowButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/BuyNowButton-BfqFltBR.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/buynowbutton) [Buy​Now​Button](https://shopify.dev/docs/api/shop-minis/components/commerce/buynowbutton) [Navigates directly to Shop's express checkout, bypassing the cart entirely.](https://shopify.dev/docs/api/shop-minis/components/commerce/buynowbutton) [![FavoriteButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/FavoriteButton-D9OAhJlP.png)![FavoriteButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/FavoriteButton-D9OAhJlP.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/favoritebutton) [Favorite​Button](https://shopify.dev/docs/api/shop-minis/components/commerce/favoritebutton) [A button component for toggling a favorite state, typically used for products.](https://shopify.dev/docs/api/shop-minis/components/commerce/favoritebutton) [![MerchantCard](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/MerchantCard-BEB5ARky.png)![MerchantCard](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/MerchantCard-BEB5ARky.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/merchantcard) [Merchant​Card](https://shopify.dev/docs/api/shop-minis/components/commerce/merchantcard) [Use when showcasing merchants as destinations, not just product sources.](https://shopify.dev/docs/api/shop-minis/components/commerce/merchantcard) [![ProductCard](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ProductCard-Bcgva7c6.png)![ProductCard](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ProductCard-Bcgva7c6.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/productcard) [Product​Card](https://shopify.dev/docs/api/shop-minis/components/commerce/productcard) [Optimized for grid layouts with three variants: `default`, `priceOverlay`, and `compact`.](https://shopify.dev/docs/api/shop-minis/components/commerce/productcard) [![ProductLink](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ProductLink-DUa0xTsk.png)![ProductLink](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ProductLink-DUa0xTsk.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/productlink) [Product​Link](https://shopify.dev/docs/api/shop-minis/components/commerce/productlink) [A list item component for displaying products in search results, lists, and feeds.](https://shopify.dev/docs/api/shop-minis/components/commerce/productlink) [![Search](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Search-LNQULaaC.png)![Search](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Search-LNQULaaC.png)](https://shopify.dev/docs/api/shop-minis/components/commerce/search) [Search](https://shopify.dev/docs/api/shop-minis/components/commerce/search) [Product search with automatic debouncing via `useProductSearch` hook.](https://shopify.dev/docs/api/shop-minis/components/commerce/search) ## Navigation [Minis​Router](https://shopify.dev/docs/api/shop-minis/components/navigation/minisrouter) [MinisRouter is the main routing component for Shop Minis that wraps React Router's BrowserRouter and provides optional support for smooth navigation transitions using the CSS View Transitions API.](https://shopify.dev/docs/api/shop-minis/components/navigation/minisrouter) [Static​Area](https://shopify.dev/docs/api/shop-minis/components/navigation/staticarea) [A layout wrapper that prevents header and footer content from animating during screen view transitions.](https://shopify.dev/docs/api/shop-minis/components/navigation/staticarea) [Transition​Link](https://shopify.dev/docs/api/shop-minis/components/navigation/transitionlink) [Navigation component that triggers animated page changes based on CSS View Transitions.](https://shopify.dev/docs/api/shop-minis/components/navigation/transitionlink) ## Primitives [![Accordion](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Accordion-CO-d2J-l.png)![Accordion](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Accordion-CO-d2J-l.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/accordion) [Accordion](https://shopify.dev/docs/api/shop-minis/components/primitives/accordion) [A component with multiple configuration options for collapsing and expanding content.](https://shopify.dev/docs/api/shop-minis/components/primitives/accordion) [![Alert](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Alert-B8MIwEDy.png)![Alert](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Alert-B8MIwEDy.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/alert) [Alert](https://shopify.dev/docs/api/shop-minis/components/primitives/alert) [A component with a title and description, available in different visual variants.](https://shopify.dev/docs/api/shop-minis/components/primitives/alert) [![AlertDialog](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/AlertDialog-DQhTgumo.png)![AlertDialog](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/AlertDialog-DQhTgumo.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/alertdialog) [Alert​Dialog](https://shopify.dev/docs/api/shop-minis/components/primitives/alertdialog) [A composable component for important confirmations and alerts with customizable actions.](https://shopify.dev/docs/api/shop-minis/components/primitives/alertdialog) [![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Avatar-DFKULvt_.png)![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Avatar-DFKULvt_.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/avatar) [Avatar](https://shopify.dev/docs/api/shop-minis/components/primitives/avatar) [A component used for displaying user avatars, with image support and fallback initials for when the image fails to load.](https://shopify.dev/docs/api/shop-minis/components/primitives/avatar) [![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Badge-CoClgcIr.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Badge-CoClgcIr.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/badge) [Badge](https://shopify.dev/docs/api/shop-minis/components/primitives/badge) [A component for displaying status, categories, or labels with multiple visual variants.](https://shopify.dev/docs/api/shop-minis/components/primitives/badge) [![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Button-CIXtNuGa.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Button-CIXtNuGa.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/button) [Button](https://shopify.dev/docs/api/shop-minis/components/primitives/button) [A versatile button component with multiple variants and sizes for user interactions.](https://shopify.dev/docs/api/shop-minis/components/primitives/button) [![Card](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Card-TQz3aNUn.png)![Card](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Card-TQz3aNUn.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/card) [Card](https://shopify.dev/docs/api/shop-minis/components/primitives/card) [A composable component with header, content, and footer sections for displaying grouped information.](https://shopify.dev/docs/api/shop-minis/components/primitives/card) [![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Checkbox-DqXhIg9H.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Checkbox-DqXhIg9H.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/checkbox) [Checkbox](https://shopify.dev/docs/api/shop-minis/components/primitives/checkbox) [A component for boolean selections with checked and disabled states.](https://shopify.dev/docs/api/shop-minis/components/primitives/checkbox) [Content​Wrapper](https://shopify.dev/docs/api/shop-minis/components/primitives/contentwrapper) [The `ContentWrapper` component fetches and provides user-generated content data using a render function pattern.](https://shopify.dev/docs/api/shop-minis/components/primitives/contentwrapper) [![IconButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/IconButton-BILarkue.png)![IconButton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/IconButton-BILarkue.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/iconbutton) [Icon​Button](https://shopify.dev/docs/api/shop-minis/components/primitives/iconbutton) [A button component that displays an icon in various sizes.](https://shopify.dev/docs/api/shop-minis/components/primitives/iconbutton) [![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Image-C9beFiEF.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Image-C9beFiEF.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/image) [Image](https://shopify.dev/docs/api/shop-minis/components/primitives/image) [An optimized image component that handles File objects, remote URLs, blob URL lifecycle management, and progressive loading with thumbhash placeholders.](https://shopify.dev/docs/api/shop-minis/components/primitives/image) [![ImageContentWrapper](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ImageContentWrapper-CCCT-QPA.png)![ImageContentWrapper](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ImageContentWrapper-CCCT-QPA.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/imagecontentwrapper) [Image​Content​Wrapper](https://shopify.dev/docs/api/shop-minis/components/primitives/imagecontentwrapper) [The `ImageContentWrapper` component renders images uploaded via the `useCreateImageContent` hook.](https://shopify.dev/docs/api/shop-minis/components/primitives/imagecontentwrapper) [![Input](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Input-5RlWEw42.png)![Input](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Input-5RlWEw42.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/input) [Input](https://shopify.dev/docs/api/shop-minis/components/primitives/input) [A simple component for inputting text.](https://shopify.dev/docs/api/shop-minis/components/primitives/input) [![Label](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Label-W1qfhO_u.png)![Label](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Label-W1qfhO_u.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/label) [Label](https://shopify.dev/docs/api/shop-minis/components/primitives/label) [A simple component to render accessible text.](https://shopify.dev/docs/api/shop-minis/components/primitives/label) [![List](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/List-Dzvqt0pR.png)![List](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/List-Dzvqt0pR.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/list) [List](https://shopify.dev/docs/api/shop-minis/components/primitives/list) [A virtualized list component for efficiently rendering large datasets with customizable item rendering and built-in pull-to-refresh functionality.](https://shopify.dev/docs/api/shop-minis/components/primitives/list) [![ProductVariantPrice](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ProductVariantPrice-DL6-fqjv.png)![ProductVariantPrice](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/ProductVariantPrice-DL6-fqjv.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/productvariantprice) [Product​Variant​Price](https://shopify.dev/docs/api/shop-minis/components/primitives/productvariantprice) [A component for displaying product pricing with support for discounts and custom styling.](https://shopify.dev/docs/api/shop-minis/components/primitives/productvariantprice) [![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Progress-BItSq2tT.png)![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Progress-BItSq2tT.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/progress) [Progress](https://shopify.dev/docs/api/shop-minis/components/primitives/progress) [A component for showing completion status or loading progress.](https://shopify.dev/docs/api/shop-minis/components/primitives/progress) [![QuantitySelector](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/QuantitySelector-5t-Rijfk.png)![QuantitySelector](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/QuantitySelector-5t-Rijfk.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/quantityselector) [Quantity​Selector](https://shopify.dev/docs/api/shop-minis/components/primitives/quantityselector) [A component with increment and decrement buttons for adjusting quantities.](https://shopify.dev/docs/api/shop-minis/components/primitives/quantityselector) [![RadioGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/RadioGroup--4BW95Eq.png)![RadioGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/RadioGroup--4BW95Eq.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/radiogroup) [Radio​Group](https://shopify.dev/docs/api/shop-minis/components/primitives/radiogroup) [A radio group component for single-selection options.](https://shopify.dev/docs/api/shop-minis/components/primitives/radiogroup) [Safe​Area](https://shopify.dev/docs/api/shop-minis/components/primitives/safearea) [A container that applies safe area insets as padding or margin, ensuring content is not hidden behind system UI such as the home indicator on iOS or the navigation bar on Android.](https://shopify.dev/docs/api/shop-minis/components/primitives/safearea) [![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Select-Dt8p_dBz.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Select-Dt8p_dBz.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/select) [Select](https://shopify.dev/docs/api/shop-minis/components/primitives/select) [A dropdown component with support for grouped options and disabled states.](https://shopify.dev/docs/api/shop-minis/components/primitives/select) [![Skeleton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Skeleton-DgxxHNX5.png)![Skeleton](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Skeleton-DgxxHNX5.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/skeleton) [Skeleton](https://shopify.dev/docs/api/shop-minis/components/primitives/skeleton) [A placeholder component for loading states, with customizable dimensions.](https://shopify.dev/docs/api/shop-minis/components/primitives/skeleton) [![TextInput](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/TextInput-CXFoQtDo.png)![TextInput](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/TextInput-CXFoQtDo.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/textinput) [Text​Input](https://shopify.dev/docs/api/shop-minis/components/primitives/textinput) [A wrapper around the base Input that automatically adjusts the layout to keep the focused field visible when the on-screen keyboard appears.](https://shopify.dev/docs/api/shop-minis/components/primitives/textinput) [![Toaster](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Toaster-qCBDq-jv.png)![Toaster](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/Toaster-qCBDq-jv.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/toaster) [Toaster](https://shopify.dev/docs/api/shop-minis/components/primitives/toaster) [A notification component that shows up from the bottom, in various states.](https://shopify.dev/docs/api/shop-minis/components/primitives/toaster) [Touchable](https://shopify.dev/docs/api/shop-minis/components/primitives/touchable) [Animated wrapper providing native-like tap feedback.](https://shopify.dev/docs/api/shop-minis/components/primitives/touchable) [![VideoPlayer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/VideoPlayer-5jH-I4pB.png)![VideoPlayer](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/shop-minis/VideoPlayer-5jH-I4pB.png)](https://shopify.dev/docs/api/shop-minis/components/primitives/videoplayer) [Video​Player](https://shopify.dev/docs/api/shop-minis/components/primitives/videoplayer) [Video.js-powered player with automatic format handling.](https://shopify.dev/docs/api/shop-minis/components/primitives/videoplayer)