React component library for Stellar.
Drop-in UI primitives for wallet connection, transaction flows,
account display, and Soroban contract interaction — powered by sorokit-core.
Part of the sorokit ecosystem.
sorokit-ui is the React layer of the sorokit ecosystem. It provides ready-to-use components that connect directly to sorokit-core — so you can add wallet connection, balance display, payment flows, and Soroban contract interaction to your app without building any of the wiring yourself.
All components are unstyled by default and accept a className prop, making them compatible with Tailwind, CSS Modules, or any styling approach you already use.
npm install sorokit-ui sorokit-core @creit.tech/stellar-wallets-kitBoth sorokit-core and @creit.tech/stellar-wallets-kit are required peer dependencies.
Wrap your app in SorokitProvider, then use components anywhere in the tree:
import {
SorokitProvider,
ConnectWalletButton,
AccountBalance,
} from "sorokit-ui";
function App() {
return (
<SorokitProvider network="testnet">
<ConnectWalletButton />
<AccountBalance />
</SorokitProvider>
);
}SorokitProvider initialises a sorokit-core client and makes it available to all child components via context.
import { SorokitProvider } from "sorokit-ui";
<SorokitProvider
network="testnet" // "mainnet" | "testnet" | "futurenet"
horizonUrl="https://..." // optional: override Horizon URL
rpcUrl="https://..." // optional: override Soroban RPC URL
>
{children}
</SorokitProvider>;// Connect / disconnect button with wallet picker
<ConnectWalletButton />
// Display the connected wallet's public key (truncated)
<WalletAddress />
// Show connection status
<WalletStatus />// Display all balances for the connected account
<AccountBalance />
// Filter by asset
<AccountBalance assetCode="USDC" excludeZero />
// Display a single asset balance inline
<AssetBalance assetCode="XLM" />// Pre-wired payment form: amount + destination + submit
<PaymentForm
onSuccess={(result) => console.log(result)}
onError={(err) => console.error(err)}
/>
// Display a single transaction's status by hash
<TransactionStatus hash="abc123..." />// Read a contract value and display it
<ContractRead
contractId="C..."
method="get_balance"
args={[scAddress]}
/>
// Invoke a contract method with a connected wallet
<ContractInvoke
contractId="C..."
method="transfer"
args={[scAddress, scAmount]}
onSuccess={(hash) => console.log(hash)}
/>If you need the underlying client or wallet state directly, hooks are available:
import { useSorokit, useWallet, useAccount, useTransaction } from "sorokit-ui";
// Access the raw sorokit-core client
const { client } = useSorokit();
// Wallet state and connect/disconnect actions
const { publicKey, connected, connect, disconnect } = useWallet();
// Account data for the connected wallet
const { balances, loading, error } = useAccount();
// Build and submit transactions
const { buildPayment, submit, status } = useTransaction();All hooks must be used inside a SorokitProvider.
Components are unstyled by default. Every component accepts a className prop:
// Tailwind
<ConnectWalletButton className="rounded-lg bg-indigo-600 px-4 py-2 text-white" />
// CSS Modules
<AccountBalance className={styles.balance} />To apply a consistent base style across all components, pass a classNames map to the provider:
<SorokitProvider
network="testnet"
classNames={{
connectButton: "rounded-lg bg-indigo-600 px-4 py-2 text-white",
accountBalance: "font-mono text-sm text-gray-700",
}}
>
{children}
</SorokitProvider>// Development
<SorokitProvider network="testnet">
// Production
<SorokitProvider network="mainnet">
// Bleeding edge
<SorokitProvider network="futurenet">
// Self-hosted infrastructure
<SorokitProvider
network="mainnet"
horizonUrl="https://my-horizon.example.com"
rpcUrl="https://my-rpc.example.com"
>Composable — every component does one thing. Combine them freely; there are no required groupings or wrapper hierarchies beyond the provider.
Unstyled by default — no opinion about your design system. Bring Tailwind, CSS Modules, styled-components, or plain CSS.
Powered by sorokit-core — all network logic lives in sorokit-core. Components are thin UI wrappers — no duplicated Stellar logic, no diverging behaviour between the SDK and the UI layer.
No-throw, all the way down — error states are props and hook return values, never unhandled exceptions.
Pull requests are welcome. For significant changes, please open an issue first to discuss what you'd like to change.
See CONTRIBUTING.md for detailed development guidelines, code style, and the PR process.
This package is now public ("private": false in package.json). To publish a new version:
- Update the version in
package.json - Update CHANGELOG.md with changes
- Create a GitHub release with tag
v{version} - CI automatically publishes to npm
Requires NPM_TOKEN secret in GitHub repository settings.