> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <Item />

> Unified product card that renders vertical or horizontal layouts.

# Item

<Snippet file="api-key-location.mdx" />

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

Desktop

Mobile

## Import

```tsx theme={null}
import { Item } from '@/components/Item'
```

## Usage

```tsx theme={null}
{/* Vertical layout for grid view */}
<Item product={product} layout="vertical" onAdd={handleAdd} />

{/* Horizontal layout for list view */}
<Item product={product} layout="horizontal" onAdd={handleAdd} />
```

## Props

**product** `Product` *required*

The product object containing name, description, price, images, and modifier groups.

**layout** `'vertical' | 'horizontal'` (default: vertical)

Controls the card layout direction.

**onAdd** `(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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.