Installation - Crave API Documentation

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.

Use the CLI

Start from a Crave storefront template with components and SDK wiring included.

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

For new storefronts, start with the Crave CLI. The generated template includes the Storefront SDK, component files, Tailwind setup, and environment variables.

npx craveup init

Then run the generated app:

cd crave-storefront
pnpm install
pnpm dev

The template is the recommended source of truth for component file structure because the components are meant to be edited in your app.

Existing app

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

pnpm add @craveup/storefront-sdk

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 copy the Crave component source from a generated storefront template into your app’s components directory and adapt imports to match your aliases.

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.

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

export const storefrontClient = createStorefrontClient({
  apiKey: process.env.NEXT_PUBLIC_CRAVEUP_API_KEY,
});

Add the required environment variables:

NEXT_PUBLIC_CRAVEUP_API_KEY=sk_live_xxx
NEXT_PUBLIC_LOCATION_ID=loc_abc123

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.

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