Installation

Crave UI components are local React components that sit inside your storefront app. They pair with the Storefront SDK, Tailwind CSS, and shadcn/ui conventions so you can own the markup, styling, and ordering flows. Choose the setup that matches your starting point.

Public API setup

Configure the API origin, merchant slug, and location ID without a browser credential.

Use the CLI

Inspect one of the current legacy public storefront examples locally.

Existing app

Add the SDK, shared UI dependencies, and component source to an app you already own.

Project structure

See where components, API helpers, and shared utilities should live.

Use the CLI

The released CLI 1.x can clone one of the current legacy public examples and write its public storefront settings. These examples do not define the current production SDK or component contract and require migration and review before deployment.

npx @craveup/cli init

Then run the generated app:

cd crave-storefront
pnpm install
pnpm dev

For new production work, use the exact-pinned Storefront SDK guide and the component contracts in these docs as the source of truth. Treat the CLI 1.x examples as implementation references only.

Existing app

For an existing React or Next.js app, install the SDK first:

pnpm add --save-exact @craveup/storefront-sdk@2.0.1

If your app does not already use shadcn/ui, initialize it before copying component source:

pnpm dlx shadcn@latest init

Install the shared UI utilities used by the component examples:

pnpm add class-variance-authority clsx tailwind-merge lucide-react

Then adapt the documented component examples inside your app’s components directory and keep the SDK transport, ordering state, and presentation boundaries explicit.

Project structure

Use a structure that keeps UI, data access, and ordering state separate:

src/
  app/
    menu/
    cart/
    checkout/
  components/
    menu/
    cart/
    checkout/
    fulfillment/
    modifiers/
    post-order/
    ui/
  lib/
    storefront-client.ts
    utils.ts
  types/
    storefront.ts

Configure the SDK

Create a shared Storefront SDK client and import it from your data loaders, hooks, or server actions. Get the published location ID and merchant slug from Crave Business Manager. Configure the public API origin explicitly.

import { createStorefrontClient } from "@craveup/storefront-sdk";

export const storefrontClient = createStorefrontClient({
  baseUrl: process.env.NEXT_PUBLIC_CRAVEUP_API_URL!,
  sessionStore,
  getAuthToken,
  getMerchantSlug: () => merchantSlug,
});

For customer flows, source getAuthToken from the active Clerk session with the crave-customer token template. Clerk owns token persistence and refresh; do not store the JWT in application storage. getMerchantSlug is required for customer operations so Crave can route the same Clerk diner to the correct restaurant organization. Add the required environment variables:

NEXT_PUBLIC_CRAVEUP_API_URL=https://api.craveup.com
NEXT_PUBLIC_CRAVEUP_LOCATION_ID=loc_abc123
NEXT_PUBLIC_CRAVEUP_MERCHANT_SLUG=demo-cafe

Import components

Crave component docs use local imports so you can customize the implementation:

import { CartPanel } from "@/components/cart/cart-panel";
import { Item } from "@/components/menu/item";
import { MenuSwitcher } from "@/components/menu/menu-switcher";

Keep the component source in your app, then pass SDK data and callbacks from your own routes or state layer.

Next steps

Components Overview

Browse the full component catalog.

Storefront SDK

Configure the typed API client used by the components.

Display Menu

Fetch menu data and render categories, products, and modifiers.

Manage Cart

Wire cart creation, item updates, discounts, and checkout handoff.

UI Components

Menu & Products

Modifiers

Cart

Checkout

Fulfillment

Post-Order

Public API setup

Use the CLI

Existing app

Project structure

Use the CLI

Existing app

Project structure

Configure the SDK

Import components

Next steps

Components Overview

Storefront SDK

Display Menu

Manage Cart

Public API setup

Use the CLI

Existing app

Project structure

​Use the CLI

​Existing app

​Project structure

​Configure the SDK

​Import components

​Next steps

Components Overview

Storefront SDK

Display Menu

Manage Cart

Use the CLI

Existing app

Project structure

Configure the SDK

Import components

Next steps