# starknet-tokenkit

> A package that provides quick access to tokens in a modal format or you can interact with the contract to read the different tokens using the contract address and the abi.

Latest version **3.0.6** (published 2026-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install starknet-tokenkit
pnpm add starknet-tokenkit
yarn add starknet-tokenkit
bun add starknet-tokenkit
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.6 |
| Published | 2026-05-13 |
| First published | 2024-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 232.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tokenkit |
| Maintainers | dalmasonto |
| Keywords | starknet, tokens, starknetkit, tokenkit, token |

## Links

- npm: https://www.npmjs.com/package/starknet-tokenkit
- Homepage: https://tokenkithq.io
- Issues: https://github.com/Cycle-Stark/token-kit/issues
- npm.io page: https://npm.io/package/starknet-tokenkit

## Dependencies (1)

- [bignumber.js](https://npm.io/package/bignumber.js.md) ^9.1.2

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 3.0.6 (latest) — 2026-05-13
- 3.0.5 — 2026-05-13
- 3.0.3 — 2026-03-08
- 3.0.2 — 2026-03-08
- 3.0.1 — 2026-03-08
- 3.0.0-2 — 2025-04-23
- 3.0.0-1 — 2025-04-23
- 3.0.0 — 2025-04-23
- 2.7.0 — 2025-01-19
- 2.6.9 — 2024-10-21
- 2.6.8 — 2024-07-16
- 2.6.7 — 2024-07-16
- 2.6.6 — 2024-05-26
- 2.6.5 — 2024-05-26
- 2.6.4 — 2024-05-26
- … 29 more at https://npm.io/package/starknet-tokenkit/versions

## README

# Starknet Tokenkit

[![npm version](https://img.shields.io/npm/v/starknet-tokenkit.svg)](https://www.npmjs.com/package/starknet-tokenkit)
[![npm downloads](https://img.shields.io/npm/dt/starknet-tokenkit)](https://www.npmjs.com/package/starknet-tokenkit)

A drop-in token selector for Starknet dApps. Themeable, keyboard-navigable, and built to slot into wallets, DEXes, and any UI that needs a tokens picker.

- **Live playground:** https://cycle-stark.github.io/starknet-tokenkit-package/
- **Docs:** https://docs.tokenkithq.io/docs/sdk/installation
- **Marketing site / list a token:** https://tokenkithq.io

Tested with React 19 and Next.js.

---

## Install

```bash
pnpm add starknet-tokenkit styled-components
# or
npm i starknet-tokenkit styled-components
```

`react`, `react-dom`, and `styled-components` are peer dependencies.

## Quick start

```tsx
import { useState } from 'react';
import {
  TokenKitWrapper,
  SelectTokenModal,
  themes,
  type IToken,
} from 'starknet-tokenkit';

export default function App() {
  const [selected, setSelected] = useState<IToken | null>(null);

  return (
    <TokenKitWrapper
      network="SN_MAIN"
      apiKey="YOUR_API_KEY"
      mainnetEndpoint="https://api.tokenkithq.io"
      sepoliaEndpoint="https://api.sepolia.tokenkithq.io"
      themeObject={themes.dark}
      options={{ tokensToLoad: 'public', enableRecent: true }}
    >
      <SelectTokenModal
        selectedToken={selected}
        callBackFunc={setSelected}
        modalWidth="420px"
        modalHeight="90dvh"
      >
        <button>Select Token</button>
      </SelectTokenModal>
    </TokenKitWrapper>
  );
}
```

The `children` of `SelectTokenModal` is your trigger element. Click it to open the modal.

## Components

| Component | Purpose |
|---|---|
| `TokenKitWrapper` | Top-level provider. Wraps `TokenKitProvider` + `ThemeProvider`. Configure once, near the root. |
| `SelectTokenModal` | Native `<dialog>`-based modal that wraps `SelectTokenContainer`. Use this if you want the click-to-open trigger pattern. |
| `SelectTokenContainer` | Inline (non-modal) version of the selector. Render it directly inside your own layout. |
| `TokenLogo` | Shared logo component. Falls back to initials if `logo` is empty **or** the image fails to load. |

## Options (`TokenKitOptions`)

Passed to `TokenKitWrapper` via the `options` prop.

| Option | Type | Default | Behavior |
|---|---|---|---|
| `tokensToLoad` | `'public' \| 'all'` | `'public'` | Which token set to load from the API. |
| `enableRecent` | `boolean` | `false` | **Opt in** to persisting and displaying a "Recent" tokens section. When `false`, nothing is read from or written to `localStorage`. |

## Modal props (`SelectTokenModal`, `SelectTokenContainer`)

| Prop | Type | Notes |
|---|---|---|
| `selectedToken` | `IToken \| null \| undefined` | Currently selected token (controlled). |
| `callBackFunc` | `(token: IToken) => void` | Called when a token is picked. |
| `modalWidth` | `string` | Optional. Defaults to `420px`. Auto-shrinks on mobile. |
| `modalHeight` | `string` | Optional. Defaults to theme `height` (e.g. `60dvh`). |

## Theming

The package ships several presets you can use as-is or fork.

```tsx
import { themes, type Theme } from 'starknet-tokenkit';

// Use a preset
<TokenKitWrapper themeObject={themes.lavender} ...>

// Or define your own
const myTheme: Theme = {
  colors: {
    textColor: '#f5f5f5',
    headerFooterBg: '#2c2c2c',
    background: '#1a1a1a',
    primaryColor: '#646cff',
    searchBackground: '#2c2c2c',
    searchColor: '#f5f5f5',
    searchBorderColor: '#444444',
    searchFocusBorderColor: '#646cff',
    placeholderColor: '#888888',
  },
  fonts: { fontFamily: "'Inter', sans-serif" },
  borderRadius: 20,
  height: '60dvh',
};
```

Available presets: `dark`, `light`, `blue`, `gradient`, `sunset`, `ocean`, `monochrome`, `emerald`, `lavender`, `ember`, `frost`, `carbon`, `candy`.

The `fonts.fontFamily` is honored across all elements (including native form controls — `<input>`, `<button>` — which normally ignore inherited `font-family`).

## Keyboard

- `↑` / `↓` — move focus through results
- `Enter` — select the focused token
- `Esc` — close the modal

## Development

```bash
pnpm install
pnpm dev                # playground at http://localhost:5173
pnpm run build:package  # build the library to dist/ (tsup)
pnpm run build:pages    # build the playground SPA to dist-pages/
pnpm run preview:pages  # preview the SPA build locally
```

Two Vite configs live in the repo:
- `vite.config.ts` — library mode (used by `pnpm build`)
- `vite.config.pages.ts` — SPA mode for the playground (used by `pnpm build:pages` and the Pages workflow)

## Releasing

Bump the version in `package.json`, push, then create a GitHub release. The `npm-publish.yml` workflow runs `npm run build && npm publish` on release creation.

## License

MIT

---
_Source: https://npm.io/package/starknet-tokenkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._