UI primitives & types

Beyond the compound parts, the Kit ships smaller building blocks across a handful of subpaths. Reach for these when you're building a fully bespoke UI and want the same primitives the Kit's own widgets are composed from.

@stridge/kit/ui — 28 primitives

The Kit's internal design system, exposed for hosts that want to compose their own UIs with the same atoms the compound parts use.

import { Button, Card, Dialog, Field, Select } from "@stridge/kit/ui"

Each primitive carries its own data-stridge-slot namespace — see Data attributes & slots for the targeting catalogue. Each also exports its TypeScript prop types from the same subpath.

@stridge/kit/icons — custom SVG set

The Kit's own iconography, hand-drawn in a consistent 24×24 / 1.6-stroke vocabulary.

import {
  AlertIcon, ArrowDownIcon, ArrowRightIcon, ArrowRightLeftIcon,
  CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon,
  CircleArrowUpIcon, CircleHelpIcon, ClockIcon, CopyIcon,
  ExternalLinkIcon, InfoIcon, LoaderIcon, LogoIcon,
  MailIcon, PackageIcon, QrCodeIcon, WalletIcon, XIcon,
} from "@stridge/kit/icons"

The Kit deliberately does not depend on lucide-react or other icon libraries; every icon is a small React component shipping its own SVG.

A /exchanges sub-export carries vendor brand marks (Kraken, Coinbase, …) used in the "Send from CEX" hint copy. These are intentionally not themable — vendor brand colours are non-negotiable.

@stridge/kit/wallet — wagmi helpers

Small surface for wallet-aware UI.

import { useWalletState, type ConnectWalletConfig } from "@stridge/kit/wallet"

const { address, chainId } = useWalletState()

The Kit does not re-export wagmi's own hooks — useAccount, useChainId, etc. import from wagmi directly when you need them.

@stridge/kit/format — locale-aware formatters

Pure functions for token / USD / percentage / duration / timestamp formatting. The Kit's own widgets call these internally on payload data; reach for them when you're rendering values outside the Kit's UI but want the same locale behaviour.

import {
  formatTokenAmount,
  formatUsd,
  formatPercent,
  formatDurationCoarse,
  formatDurationCompact,
  formatTimestamp,
  formatNetworkName,
  shortenAddress,
  type FormattedField,
} from "@stridge/kit/format"

Every formatter (except shortenAddress) takes an I18n instance as a second argument — get it from useKitI18n() (Internationalization).

import { useKitI18n } from "@stridge/kit/i18n"
import { formatUsd } from "@stridge/kit/format"

function PriceTag({ value }: { value: number }) {
  const i18n = useKitI18n()
  return <span>{formatUsd(value, i18n)}</span>
}

@stridge/kit/types — exhaustive type catalog

The Kit's main entry exports the types most consumers need (StridgeAppearance, DepositState, WithdrawState, controller types, …). For exhaustive narrowing — every driver payload, every FSM context shape, every settlement DTO, every event union member — reach for @stridge/kit/types:

import type {
  AcceptedAssetPayload,
  AddressItemPayload,
  BalanceItemPayload,
  QuotePayload,
  SettlementPayload,
  ReceiveOptionDto,
  WithdrawableBalanceDto,
  WithdrawalQuoteDto,
  DepositState,
  WithdrawState,
  FailureInfo,
  FailureCode,
  TxRef,
  KitConfig,
  KitTheme,
  KitRadius,
  KitDirection,
  KitStorage,
  KitStorageAdapter,
} from "@stridge/kit/types"

Use this surface when you're:

• Writing a fully headless integration and want every snapshot field strongly typed.
• Building analytics or instrumentation that narrows on event payloads.
• Wrapping the Kit in a service layer and need to type the inputs / outputs.

Storage helpers

For the small set of integrations that need direct access to the Kit's persistence layer (custom storage adapter, multi-tenant namespacing), the main entry exports the building blocks:

import {
  createKitStorage,
  createLocalStorageAdapter,
  createSessionStorageAdapter,
  createMemoryStorageAdapter,
  resolveStorageAdapter,
  DEFAULT_KIT_STORAGE_NAMESPACE,
  KitStorageProvider,
  useKitStorage,
  useKitStorageValue,
} from "@stridge/kit"

Most consumers should pass storage on the provider instead and never touch these directly.

Logos namespace

import { logos, type LogosNamespace } from "@stridge/kit"

logos.tokens.usdc      // convention-driven CDN URL
logos.chains.arbitrum  // same, for chains

logos is a small helper that returns CDN URLs the Kit's TokenLogo / ChainLogo primitives consume. Useful when you want to surface a token or chain logo outside the Kit's UI.

Chain-type helpers

Address-shape validation for the supported chain families:

import {
  type ChainType,
  isValidEvmAddress,
  isValidTronAddress,
  isValidAddressForChainType,
  toChainType,
} from "@stridge/kit"

ChainType is "evm" | "tron" | "unknown". toChainType() normalises a raw chain_type value (incl. the gateway's "TVM" tag for Tron). Address validators are permissive — they check shape, not EIP-55 checksum, matching the gateway's own behaviour.

Next

• Compound components — most consumers want the FSM-aware parts, not the bare primitives.
• Theming & CSS variables — restyle these primitives via tokens.
• Headless integration — when you reach for the bare primitives.