Components

Every component ships styled by the default stylesheet, themeable through the theme prop, and escapable via unstyled. See each one live, in every state, in the Storybook.

PasskeyWalletProvider

The root. Builds the smart-account-kit instance, restores sessions, exposes everything to hooks, and applies your theme.

<PasskeyWalletProvider config={config} theme={{ accent: "#0284c7" }}>
  {children}
</PasskeyWalletProvider>

CreateWalletButton

The full creation ceremony behind one button: passkey registration, sponsored contract deployment, optional funding. Props: label, nickname, fund, variant, size, unstyled, onCreated, onError.

ConnectWalletButton

Connects or restores a wallet. Once connected it becomes an account chip with a menu: copy address, view on stellar.expert, switch wallet, disconnect. Props: label, variant, size, unstyled, onConnected, onDisconnected, onError.

WalletBalance

Live XLM balance with an optional refresh control and polling. Props: pollInterval, showRefresh, unstyled.

SignTransactionModal

Reviews and signs any AssembledTransaction with the passkey: human-readable summary, fee, network, then Face ID. Drive it with state:

const [tx, setTx] = useState<AssembledTransaction<unknown> | null>(null);

<SignTransactionModal
  open={tx !== null}
  transaction={tx}
  title="Approve payment"
  onClose={() => setTx(null)}
  onSuccess={({ hash }) => console.log(hash)}
/>

Security components