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

# Overview

> Use Swish with Hydrogen, Next.js, or any custom React storefront.

Swish works with any headless Shopify storefront that renders with React. The setup requires two packages:

* **`@swishapp/react`** - React provider and hooks that load the SDK and give your components access to saved items, lists, counts, and intents.
* **`@swishapp/auth-proxy`** - A small server-side helper that securely creates Swish API tokens using your app secret.

## How it differs from themes

On Shopify themes, the Swish app embed handles everything automatically - loading the SDK, creating tokens through the Shopify app proxy, and injecting UI components.

Headless storefronts don't have an app proxy, so you need to:

1. **Host a token endpoint** on your server using `@swishapp/auth-proxy`. This replaces the automatic token creation that themes get for free.
2. **Wrap your app** in `SwishProvider` with your storefront credentials and the URL of your token endpoint.
3. **Use hooks** like `useSwishItem` and `useSwishItemCount` to build your UI.

Once set up, the SDK handles the same features as on themes - save buttons, wishlists, notifications, and the full Swish drawer.

## Install packages

```bash npm theme={null}
npm install @swishapp/react @swishapp/auth-proxy
```

```bash pnpm theme={null}
pnpm add @swishapp/react @swishapp/auth-proxy
```

```bash yarn theme={null}
yarn add @swishapp/react @swishapp/auth-proxy
```

## Framework guides

Follow the guide for your framework to set up the auth proxy and provider.

> [card] [Hydrogen](https://swish.app/docs/guides/headless/hydrogen.md)
>
> Shopify's React framework with built-in Storefront API access.

> [card] [Next.js](https://swish.app/docs/guides/headless/nextjs.md)
>
> App Router setup with Route Handlers and server components.

Using a different framework? The pattern is the same for any React app - expose `@swishapp/auth-proxy` on a server route and pass its URL to `SwishProvider`. See the [auth proxy reference](https://swish.app/docs/guides/headless/auth-proxy.md) for the full configuration.


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