Skip to main content

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.

​
Prerequisites

  • React 19 + TypeScript
  • Tailwind v4
  • pnpm (npm and yarn work too — substitute throughout)
  • 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)

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. One-time setup: add a registry entry to your project’s components.json: 
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "registries": {
    "@rye-api": "https://registry.rye.com/r/{name}.json"
  }
}
Then: 
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

Nameshadcn add
Product cardpnpm dlx shadcn add @rye-api/product-card
Product detailspnpm dlx shadcn add @rye-api/product-details
Variant selectorpnpm dlx shadcn add @rye-api/variant-selector
Pay with pointspnpm dlx shadcn add @rye-api/pay-with-points
Payment sheetpnpm dlx shadcn add @rye-api/payment-sheet
Order trackingpnpm dlx shadcn add @rye-api/order-tracking
Address formpnpm 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.