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

# Rewards UI

> Drop-in React components for points-redemption, mixed-tender checkout, and post-purchase tracking flows built on Rye's Universal Checkout API.

`@rye-api/rewards-ui` is a source-available React component library for partners building rewards-program redemption flows on Rye. Designed for credit-card rewards programs, points-based loyalty apps, and corporate gifting platforms.

Components ship as source via the shadcn CLI, not as a compiled package. Partners install, own, and customize the source — no compiled black box, no theme variants to maintain, no npm dep to upgrade. Restyle by editing five CSS tokens; fork a component when the defaults don't fit.

## What's in v1

| Component             | Surface                     |
| --------------------- | --------------------------- |
| `<ProductCard />`     | Catalog tile                |
| `<ProductDetails />`  | Compound PDP                |
| `<VariantSelector />` | Standalone variant picker   |
| `<PayWithPoints />`   | Composable redemption slot  |
| `<PaymentSheet />`    | Compound checkout sheet     |
| `<OrderTracking />`   | Compound post-purchase view |
| `<AddressForm />`     | Buyer address entry         |

Each component speaks the canonical shapes from the [Universal Checkout API](/api-v2/introduction) — `Buyer`, `Money`, `Product` — so values from a checkout intent drop straight through without remapping.

## Architecture invariants

1. **No API client at runtime.** The components never import `checkout-intents` (or any other Rye API client) at runtime. Type imports are allowed and encouraged. Components receive data via props and emit callbacks; your backend is the only thing that talks to Rye's API. Enforced by an oxlint `no-restricted-imports` rule.
2. **Partner is merchant of record.** Components never see a Rye API key. User auth is partner-owned; the SDK is a thin pipe between partner-supplied state and partner-supplied callbacks.
3. **Theme-aware by default.** Every CTA, button, and glassy panel reads from CSS-var tokens. Override five tokens in your own `globals.css` to rebrand without forking components.

## Stack

* React 19, TypeScript strict
* Tailwind v4 with CSS custom-property tokens
* [Base UI](https://base-ui.com/) primitives for behavior and accessibility
* Lucide for iconography

## Live demo

See every component in every state at [rewards.rye.com](https://rewards.rye.com).

## Source

[github.com/rye-com/rewards-ui](https://github.com/rye-com/rewards-ui) (MIT).