Skip to main content

​
Item

Need storefront configuration?

Use the public API origin, merchant slug, and location ID. Storefront components never receive a Crave API key; register each exact browser origin before making requests.
A versatile product card component that displays a menu item with image, name, description, price, and a quick-add button. Supports both vertical (grid) and horizontal (list) layouts.

​
Preview

​
Import

​
Usage

​
Props

​
Product
required
The product object containing name, description, price, images, and modifier groups.
​
'vertical' | 'horizontal'
default:"vertical"
Controls the card layout direction.
​
(product: Product) => void
required
Callback fired when the add button is clicked. If the product has modifiers, this should open the ProductDescriptionScreen.

​
Behavior

  • Truncates long descriptions with ellipsis
  • Shows product image with fallback placeholder
  • Quick-add button bypasses modifier screen when no modifiers exist
  • Displays “From $X.XX” when modifier groups affect pricing