Components
Anchor to CommerceCommerce


Add
Adds products to Shop's cart with checkmark animation feedback.


Buy
Navigates directly to Shop's express checkout, bypassing the cart entirely.


Favorite
A button component for toggling a favorite state, typically used for products.


Merchant
Use when showcasing merchants as destinations, not just product sources.


Product
Optimized for grid layouts with three variants: default, priceOverlay, and compact.


Product
A list item component for displaying products in search results, lists, and feeds.


Search
Product search with automatic debouncing via useProductSearch hook.
Minis
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.
Static
A layout wrapper that prevents header and footer content from animating during screen view transitions.
Transition
Navigation component that triggers animated page changes based on CSS View Transitions.
Anchor to PrimitivesPrimitives


Accordion
A component with multiple configuration options for collapsing and expanding content.


Alert
A component with a title and description, available in different visual variants.


Alert
A composable component for important confirmations and alerts with customizable actions.
Avatar
A component used for displaying user avatars, with image support and fallback initials for when the image fails to load.


Badge
A component for displaying status, categories, or labels with multiple visual variants.


Button
A versatile button component with multiple variants and sizes for user interactions.


Card
A composable component with header, content, and footer sections for displaying grouped information.


Checkbox
A component for boolean selections with checked and disabled states.
Content
The ContentWrapper component fetches and provides user-generated content data using a render function pattern.
Icon
A button component that displays an icon in various sizes.


Image
An optimized image component that handles File objects, remote URLs, blob URL lifecycle management, and progressive loading with thumbhash placeholders.


Image
The ImageContentWrapper component renders images uploaded via the useCreateImageContent hook.


Input
A simple component for inputting text.


Label
A simple component to render accessible text.


List
A virtualized list component for efficiently rendering large datasets with customizable item rendering and built-in pull-to-refresh functionality.


Product
A component for displaying product pricing with support for discounts and custom styling.


Progress
A component for showing completion status or loading progress.


Quantity
A component with increment and decrement buttons for adjusting quantities.


Radio
A radio group component for single-selection options.
Safe
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.


Select
A dropdown component with support for grouped options and disabled states.


Skeleton
A placeholder component for loading states, with customizable dimensions.


Text
A wrapper around the base Input that automatically adjusts the layout to keep the focused field visible when the on-screen keyboard appears.


Toaster
A notification component that shows up from the bottom, in various states.
Touchable
Animated wrapper providing native-like tap feedback.


Video
Video.js-powered player with automatic format handling.