> ## 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="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 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 @craveup/storefront-sdk
```

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.

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

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

Add the required environment variables:

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

```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>