// 1. Import styles (once, in your entry file)
import 'stacks-kit/styles.css';

// 2. Use components
import { StacksKitProvider, ConnectButton } from 'stacks-kit';

function App() {
  return (
    <StacksKitProvider>
      <ConnectButton />
    </StacksKitProvider>
  );
}

<ConnectButton className="rounded-full bg-blue-500" />

import { useWallet } from 'stacks-kit';

function App() {
  const { isConnected, address, connect, disconnect } = useWallet();

  if (!isConnected) {
    return <button onClick={() => connect()}>Connect</button>;
  }

  return (
    <div>
      <p>{address}</p>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

import { useBalance } from 'stacks-kit';

function Balance() {
  const { balance, isLoading } = useBalance();

  if (isLoading) return <span>Loading...</span>;
  return <span>{balance} STX</span>;
}

import { useStxTransfer } from 'stacks-kit';

function SendButton() {
  const { transfer, isLoading, txId } = useStxTransfer();

  const send = () => {
    transfer({
      recipient: 'SP2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9KJ3F',
      amount: '1000000', // 1 STX
    });
  };

  return (
    <div>
      <button onClick={send} disabled={isLoading}>Send 1 STX</button>
      {txId && <p>TX: {txId}</p>}
    </div>
  );
}

import { useContractCall } from 'stacks-kit';
import { uintCV } from '@stacks/transactions';

function MintButton() {
  const { call, isLoading } = useContractCall();

  const mint = () => {
    call({
      contract: 'SP123.my-nft',
      functionName: 'mint',
      functionArgs: [uintCV(1)],
    });
  };

  return <button onClick={mint} disabled={isLoading}>Mint</button>;
}

import { ConnectButton } from 'stacks-kit';

// Full-featured connect button with dropdown
<ConnectButton showBalance showNetwork />

import { AddressDisplay } from 'stacks-kit';

// Truncated address with copy
<AddressDisplay address="SP2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKQ9KJ3F" copyable />