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

# Installation

> Install dependencies and structure your app for Crave UI components.

Crave UI components are local React components that sit inside your storefront app. They pair with the [Storefront SDK](/getting-started/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.

<CardGroup cols={3}>
  <Card title="Public API setup" icon="plug" href="/getting-started/storefront-sdk">
    Configure the API origin, merchant slug, and location ID without a browser
    credential.
  </Card>

  <Card title="Use the CLI" icon="terminal" href="#use-the-cli">
    Start from a Crave storefront template with components and SDK wiring
    included.
  </Card>

  <Card title="Existing app" icon="wrench" href="#existing-app">
    Add the SDK, shared UI dependencies, and component source to an app you
    already own.
  </Card>

  <Card title="Project structure" icon="folders" href="#project-structure">
    See where components, API helpers, and shared utilities should live.
  </Card>
</CardGroup>

## 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.

```bash theme={null}
npx @craveup/cli init
```

Then run the generated app:

```bash theme={null}
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:

```bash theme={null}
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:

```bash theme={null}
pnpm dlx shadcn@latest init
```

Install the shared UI utilities used by the component examples:

```bash theme={null}
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:

```txt theme={null}
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.

```ts filename="src/lib/storefront-client.ts" theme={null}
import { createStorefrontClient } from "@craveup/storefront-sdk";

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

Add the required environment variables:

```env filename=".env.local" theme={null}
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:

```tsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Components Overview" icon="puzzle" href="/components/overview">
    Browse the full component catalog.
  </Card>

  <Card title="Storefront SDK" icon="code" href="/getting-started/storefront-sdk">
    Configure the typed API client used by the components.
  </Card>

  <Card title="Display Menu" icon="utensils" href="/guides/display-menu">
    Fetch menu data and render categories, products, and modifiers.
  </Card>

  <Card title="Manage Cart" icon="shopping-cart" href="/guides/manage-cart">
    Wire cart creation, item updates, discounts, and checkout handoff.
  </Card>
</CardGroup>