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

# Install

> Add Rewards UI components to your app via the shadcn CLI. Source files copy into your repo — you own them from then on.

## Prerequisites

* React 19 + TypeScript
* Tailwind v4
* `pnpm` (`npm` and `yarn` work too — substitute throughout)
* [`checkout-intents`](https://www.npmjs.com/package/checkout-intents) — the Universal Checkout SDK that components import types from (no runtime usage)

## Add a component

Two equivalent ways to pull a component into your project.

### Option A — Full URL (zero setup)

```bash theme={null}
pnpm dlx shadcn@latest add https://registry.rye.com/r/product-card.json
```

Run that once per component. Files land in `components/rye-rewards/` (path is configurable in your `components.json`). After install you commit the source and own it from there.

### Option B — Namespace shortcut (recommended)

One-time setup: add a registry entry to your project's `components.json`:

```json theme={null}
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "registries": {
    "@rye-api": "https://registry.rye.com/r/{name}.json"
  }
}
```

Then:

```bash theme={null}
pnpm dlx shadcn@latest add @rye-api/product-card
pnpm dlx shadcn@latest add @rye-api/product-details
pnpm dlx shadcn@latest add @rye-api/address-form
# ...etc
```

## Available components

| Name             | shadcn add                                      |
| ---------------- | ----------------------------------------------- |
| Product card     | `pnpm dlx shadcn add @rye-api/product-card`     |
| Product details  | `pnpm dlx shadcn add @rye-api/product-details`  |
| Variant selector | `pnpm dlx shadcn add @rye-api/variant-selector` |
| Pay with points  | `pnpm dlx shadcn add @rye-api/pay-with-points`  |
| Payment sheet    | `pnpm dlx shadcn add @rye-api/payment-sheet`    |
| Order tracking   | `pnpm dlx shadcn add @rye-api/order-tracking`   |
| Address form     | `pnpm dlx shadcn add @rye-api/address-form`     |

The registry index is at `https://registry.rye.com/r/registry.json` — `curl` it to see the full schema.

## What gets installed

Each `shadcn add` writes the component source plus its dependencies:

* **Component file** at `components/rye-rewards/<name>.tsx`
* **Type files** at `components/rye-rewards/types/<name>.ts` (when applicable)
* **`lib/format.ts`** — shared `formatMoney` / `formatPoints` helpers (single edit point for currency / points formatting across all components)
* **`lib/utils.ts`** — the standard shadcn `cn()` helper

You commit everything. Re-running `shadcn add` updates the files in place; `shadcn diff` shows you what changed if you've made local edits.

## Customization

Everything is source. Three common customization tracks:

* **Branding tokens** — every visual surface reads from five Tailwind CSS variables (`--ink-1`, `--ink-2`, `--page`, `--card`, `--cta`). Override them in your own `globals.css` to rebrand globally.
* **Formatting** — `lib/format.ts` exports `formatMoney` and `formatPoints`. Edit those defaults to localize currency, change points labels (e.g. `"X,XXX miles"`), etc. Single edit point — every component that displays money or points picks up the change.
* **Component logic** — when defaults don't fit, fork the source. The components are designed to be edited; they're not configured to death.