> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spark.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const VCard = ({img, light, dark, icon, href, title, description, target = "_self"}) => {
  return <div className="spark-card overflow-hidden rounded-2xl flex justify-center items-center hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="vcard-col">
          <div className="vcard-image w-full aspect-video relative">
            {light && dark ? <>
                <img src={light} alt={title} className="icon-light w-full h-full object-cover pointer-events-none" />
                <img src={dark} alt={title} className="icon-dark w-full h-full object-cover pointer-events-none" />
              </> : <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{
    backgroundImage: `url(${img})`
  }} />}
          </div>
          <div className="vcard-content flex flex-col gap-2 p-6">
            <h2 className="card-title text font-semibold leading-none">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

<Frame className="chill">
  <img className="block dark:hidden" src="https://mintcdn.com/lightspark/RCkJgy8FQAJRUhsh/images/wallets/wallet-sdk-light.png?fit=max&auto=format&n=RCkJgy8FQAJRUhsh&q=85&s=f95b17ff13e5407e5ae4112f92725069" alt="Create a Wallet" width="3840" height="1440" data-path="images/wallets/wallet-sdk-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/lightspark/RCkJgy8FQAJRUhsh/images/wallets/wallet-sdk.png?fit=max&auto=format&n=RCkJgy8FQAJRUhsh&q=85&s=5b3313f87a2d796f6d0060bcc56e2965" alt="Create a Wallet" width="3840" height="1440" data-path="images/wallets/wallet-sdk.png" />
</Frame>

The Spark Wallet SDK lets you deploy Spark-native wallets in the most scalable and developer-friendly way possible. Whether you're building for your own custody or shipping self-custodial wallets for your users, the SDK is flexible by design.

***

## Installation

### Spark SDK

The official Spark SDK for TypeScript and React Native applications.

<Columns cols={3}>
  <HCard title="React Native SDK" href="/wallets/react-native" icon="/icons/icon-reactnative.svg" description="Mobile development setup" />

  <HCard title="TypeScript SDK" href="/wallets/typescript" icon="/icons/icon-typescript.svg" description="TypeScript setup guide" />

  <HCard title="View API Docs" href="/api-reference/overview" icon="/icons/icon-api-red.svg" description="Reference documentation" />
</Columns>

### Breez SDK

The [Breez](https://breez.technology) team has built a fully native SDK in Rust with bindings for Swift, Kotlin, Python, Flutter, Go, C#, and WebAssembly. If you need native mobile performance or a language not covered by the Spark SDK, use the Breez SDK.

<Columns cols={2}>
  <HCard title="Breez SDK Docs" href="https://sdk-doc-spark.breez.technology/" target="_blank" icon="/icons/icon-app-breez.svg" description="Rust SDK with multi-language bindings" />

  <HCard title="Integration Guide" href="/integrations/breez" icon="/icons/icon-app-breez.svg" description="Quick start with Breez SDK" />
</Columns>

***

## Fundamentals

<Columns cols={2} className="gap-4">
  <VCard title="Create Wallet" light="/images/wallets/create-wallet-light.png" dark="/images/wallets/create-wallet.png" href="/wallets/create-wallet" description="Initialize and configure Spark wallets" />

  <VCard title="Transfer Tokens" light="/images/wallets/transfer-tokens-light.png" dark="/images/wallets/transfer-tokens.png" href="/wallets/transfer-tokens" description="Send and receive tokens on Spark" />

  <VCard title="Deposits" light="/images/wallets/deposit-from-lightning-light.png" dark="/images/wallets/deposit-from-lightning.png" href="/wallets/deposit-from-lightning" description="Receive Bitcoin from Lightning" />

  <VCard title="Withdraws" light="/images/wallets/withdraw-to-l1-light.png" dark="/images/wallets/withdraw-to-l1.png" href="/wallets/withdraw-to-l1" description="Withdraw Bitcoin from Spark to Layer 1" />
</Columns>

***

## Tools

<Columns cols={3}>
  <Card title="Regtest Faucet" icon="https://mintcdn.com/lightspark/CTf3lWSz3PciiPxG/icons/icon-drop-blue.svg?fit=max&auto=format&n=CTf3lWSz3PciiPxG&q=85&s=3c05bfb18cca2607c170b86f08baa8f2" description="Get test funds for development" href="https://app.lightspark.com/regtest-faucet" target="_blank" width="16" height="16" data-path="icons/icon-drop-blue.svg" />

  <Card title="Explorer" icon="https://mintcdn.com/lightspark/CTf3lWSz3PciiPxG/icons/icon-globe-greenbright.svg?fit=max&auto=format&n=CTf3lWSz3PciiPxG&q=85&s=7642d66de6b46f117a947ded41ce8349" description="Official Spark block explorer" href="https://www.sparkscan.io/?network=mainnet" target="_blank" width="16" height="16" data-path="icons/icon-globe-greenbright.svg" />

  <Card title="Spark CLI" href="/tools/cli" iconLight="/icons/icon-cli-black.svg" iconDark="/icons/icon-cli-white.svg" description="CLI for Spark operations" />
</Columns>