Getting Started

starknet-tokenkit gives you a token picker for any React dApp on Starknet. Drop in the modal, your users get a clean way to pick a token. That is the whole pitch.

TokenKit itself is a token launchpad (think pump.fun for Starknet). Tokens that launch on tokenkithq.io automatically show up in the picker, so your dApp stays in sync with what is live on the network without any extra work from you.

Info

The SDK is just the UI. It does not sign transactions or hold keys. Pair it with `starknet.js` or `starknet-react` when you need to actually do something on-chain.

What you get

Export	What it does
`TokenKitWrapper`	Top-level provider. Wraps `TokenKitProvider` + styled-components `ThemeProvider`. Configure once near your app root.
`TokenKitProvider`	Same provider, without the theme. Use if you already manage your own `ThemeProvider`.
`SelectTokenModal`	A `<dialog>`-based picker. Your trigger element is its child; clicking it opens the modal.
`SelectTokenContainer`	Same picker rendered inline (no `<dialog>`, no trigger). For sidebars and dedicated panels.
`useTokenKitContext`	Hook to read the active wrapper config (network, apiKey, options, origin) from anywhere inside the tree.
`themes`	13 ready-to-use theme presets.
`TokenBtn`, `TokenListItem`, `CloseSvg`	Low-level building blocks if you want to compose your own picker.

A 60-second example

Code

tsx

1import { useState } from 'react';
2import {
3  TokenKitWrapper,
4  SelectTokenModal,
5  themes,
6  type IToken,
7} from 'starknet-tokenkit';
8 
9export default function App() {
10  const [selected, setSelected] = useState<IToken | null>(null);
11 
12  return (
13    <TokenKitWrapper
14      network="SN_MAIN"
15      apiKey="YOUR_API_KEY"
16      mainnetEndpoint="https://api.tokenkithq.io"
17      sepoliaEndpoint="https://api.sepolia.tokenkithq.io"
18      themeObject={themes.dark}
19      options={{ tokensToLoad: 'public', enableRecent: true }}
20    >
21      <SelectTokenModal
22        selectedToken={selected}
23        callBackFunc={setSelected}
24        modalWidth="420px"
25      >
26        <button>
27          {selected?.symbol ?? 'Select token'}
28        </button>
29      </SelectTokenModal>
30    </TokenKitWrapper>
31  );
32}

The children of SelectTokenModal is your trigger. Click it to open the modal. There's no open / onClose — the dialog manages its own visibility.

Want your dApp inside Keon Wallet?

If you also want your dApp listed in the Keon Wallet in-app browser, submit it on tokenkithq.io. Keon is the in-house Starknet wallet that ships with TokenKit.

Next steps

Installation — install and configure
SelectTokenModal — the modal picker, full props and wrapper options
SelectTokenContainer — the inline version
Theming — built-in themes and custom colors
Full example — a working app with a wallet wired in
Advanced — reusable selectors, context reads, and wrapper config

Documentation

Getting Started

What you get

A 60-second example

Want your dApp inside Keon Wallet?

Next steps