shadcn registry

The shadcn registry is the recommended way to bootstrap a compound integration. One CLI command drops the canonical composition into your repo as files you fully own and edit — the Kit still owns the wiring beneath them.

pnpm dlx shadcn@latest add @stridge/kit --registry https://registry.ui.stridge.com/r

A live browser of every item — install commands, dropped-file tree, raw JSON — lives at registry.ui.stridge.com.

What you get

After running the install, your repo gains a components/stridge/ directory:

components/stridge/
├── providers.tsx                          // <StridgeAppProvider> shim
├── deposit/
│   ├── deposit.tsx                        // root composition for the flow
│   ├── methods.tsx                        // method-picker screen
│   ├── asset-picker.tsx                   // asset / chain picker
│   ├── amount-entry.tsx                   // amount entry hero + pills
│   ├── confirm.tsx                        // pre-broadcast confirm
│   ├── transfer-crypto.tsx                // QR / address copy
│   ├── processing.tsx                     // settlement watcher
│   ├── success.tsx                        // terminal success
│   ├── error.tsx                          // terminal error
│   ├── activity-list.tsx                  // activity list
│   ├── activity-detail.tsx                // activity detail
│   └── status-banner.tsx                  // inline status banner
├── withdraw/
│   ├── withdraw.tsx                       // root composition
│   ├── form.tsx                           // form + breakdown
│   ├── in-progress.tsx                    // processing screen
│   ├── success.tsx                        // terminal success
│   ├── error.tsx                          // terminal error
│   ├── activity-list.tsx                  // activity list
│   └── activity-detail.tsx                // activity detail
└── activity/
    ├── activity.tsx                       // root composition for the flow
    ├── activity-list.tsx                  // activity list
    └── activity-detail.tsx                // activity detail

Each leaf file is a thin composition over a Kit widget — the orchestrated layer that reads driver state and dispatches FSM actions internally:

components/stridge/deposit/asset-picker.tsx — illustrative

"use client"

import { AssetPicker } from "@stridge/kit/deposit/widgets"

export function StridgeDepositAssetPicker() {
  return (
    <AssetPicker>
      <AssetPicker.Header />
      <AssetPicker.Body>
        <AssetPicker.List />
      </AssetPicker.Body>
      <AssetPicker.Footer />
    </AssetPicker>
  )
}

The root composition (deposit.tsx / withdraw.tsx) imports the FSM scaffolding from @stridge/kit/{flow}/compound (Boundary / Guards / Steps / Step) and points each <Step> at the matching leaf wrapper.

You own these files. Restyle them. Reorder the sub-parts. Wrap them in your own chrome. Delete the ones you don't need. The Kit's FSM, gateway calls, and settlement watcher don't change.

Items

Four items at launch. Use the mega item for first install, the per-flow items to layer on later.

Item	Drops	Use when
`@stridge/kit`	`providers.tsx` + every deposit + every withdraw + every activity wrapper	First install. Greenfield integrators.
`@stridge/deposit`	`providers.tsx` + the deposit folder only	Adding deposit to an app that already shipped withdraw.
`@stridge/withdraw`	`providers.tsx` + the withdraw folder only	Adding withdraw to an app that already shipped deposit.
`@stridge/activity`	`providers.tsx` + the activity folder only	Adding the standalone activity surface to an app.

All flows in one go:

pnpm dlx shadcn@latest add @stridge/kit --registry https://registry.ui.stridge.com/r

Just deposit:

pnpm dlx shadcn@latest add @stridge/deposit --registry https://registry.ui.stridge.com/r

Just withdraw:

pnpm dlx shadcn@latest add @stridge/withdraw --registry https://registry.ui.stridge.com/r

Just activity:

pnpm dlx shadcn@latest add @stridge/activity --registry https://registry.ui.stridge.com/r

How the wrappers compose

The dropped wrappers stand on two public Kit subpaths, both stable and watched by the public-API drift gate:

@stridge/kit/{flow}/widgets — orchestrated, zero-prop widgets that read driver state and dispatch FSM actions internally. The leaf wrappers (asset-picker.tsx, amount-entry.tsx, confirm.tsx, success.tsx, every per-step file) compose against widgets from this subpath. Sub-parts (AssetPicker.Header, AssetPicker.Body, AssetPicker.List, …) are aliased on the widget namespace so the wrapper file stays pure composition — no useSnapshot calls, no manual transformers.
@stridge/kit/{flow}/compound — the FSM scaffolding (Deposit.Boundary / .Guards / .Steps / .Step, and withdraw mirrors). The root composition file (deposit.tsx / withdraw.tsx) imports this scaffolding to wire the FSM router around the leaf wrappers.

The wrapper does	The Kit does
Compose widget sub-parts into a screen	Read snapshot, dispatch FSM, drive the gateway, watch settlements
Render your custom prose, styling, interleaved JSX	Provide widgets, sub-parts, slots, design tokens
Place sub-parts in your preferred order	Resolve assets, quote, balance, settlement, activity

That's the boundary: structure is yours; state and side-effects are the Kit's.

Prerequisites

The CLI drop assumes:

Next.js App Router — the wrappers use "use client" and process.env.NEXT_PUBLIC_STRIDGE_*. Vite / Remix variants are a follow-up.
@stridge/kit is installed — the wrappers import widgets from @stridge/kit/deposit/widgets and @stridge/kit/withdraw/widgets, and the FSM scaffolding from @stridge/kit/{flow}/compound. See Installation.
The Kit stylesheet is loaded — @import "@stridge/kit/styles.css" once at your app entry.

Run pnpm tsc --noEmit after the install to confirm every dropped file resolves cleanly against the version of @stridge/kit you have.

Reinstalling

The shadcn CLI defaults to refusing overwrites — your edits are safe. To pull the latest canonical wrappers (after a Kit upgrade adds a new screen, for example), run with --overwrite:

pnpm dlx shadcn@latest add @stridge/deposit --registry https://registry.ui.stridge.com/r --overwrite

Diff your tree afterwards — git diff components/stridge/ — and keep / discard hunks file-by-file.

When NOT to use the registry

The registry generates a known-good starter composition. Skip it when:

You only need the modal flow as-is → mount <DepositDialog /> / <WithdrawDialog /> directly.
You're embedding one part inline (e.g. an <AssetPicker> as a sidebar rail) → import the compound part on its own. The registry is overkill for one part.
You're driving the flow from a completely custom UI → go headless.

The registry shines when you want every screen as a file in your repo without writing the composition by hand.

Compound components — the parts the dropped wrappers compose against.
Theming & CSS variables — restyle the dropped wrappers via tokens.
Provider — what providers.tsx mounts.

Was this page helpful?