> ## 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.

# Welcome to Spark

export const Button = ({href, children, className = "", target = "_self", outline}) => {
  return <a href={href} target={target} rel="noopener noreferrer" className={`not-prose inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium rounded-xl transition-colors duration-200 ${outline ? "spark-button-outline" : "spark-button"} ${className}`}>
      {children}
    </a>;
};

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>;
};

export const TabCards = ({categories, hideButtons = false}) => {
  const [activeCategory, setActiveCategory] = useState(categories[0].id);
  const [activeSubTab, setActiveSubTab] = useState(categories[0].items[0]?.id ?? null);
  const currentCategory = categories.find(cat => cat.id === activeCategory);
  const currentSub = currentCategory?.items.find(item => item.id === activeSubTab);
  return <div className="not-prose space-y-6">
    {!hideButtons && <div className="flex flex-wrap gap-2">
        {categories.map((cat, index) => {
    const colors = ['var(--blue)', 'var(--green)', 'var(--orange)'];
    const activeColor = colors[index % colors.length];
    return <button key={cat.id} onClick={() => {
      setActiveCategory(cat.id);
      setActiveSubTab(cat.items[0]?.id ?? null);
    }} className={`px-4 py-2 text-sm rounded-full font-medium transition-colors ${activeCategory === cat.id ? 'text-[var(--white)]' : 'spark-tabcard-btn'}`} style={activeCategory === cat.id ? {
      backgroundColor: activeColor
    } : {}}>
              {cat.label}
            </button>;
  })}
      </div>}

      <div>
        {currentCategory?.items?.length ? <div className="spark-tabcard-container flex flex-col lg:flex-row gap-6 rounded-2xl">
            <div className="flex flex-col w-full lg:w-1/2 space-y-2 p-4 flex-shrink-0">
              {currentCategory.items.map(item => <a key={item.id} href={item.href} onMouseOver={() => setActiveSubTab(item.id)} className={`group flex items-start gap-1.5 text-left px-5 py-3 rounded-2xl transition-all cursor-pointer ${activeSubTab === item.id ? 'spark-tabcard-item-active' : ''}`}>
                  <div className="text-xl mr-3 mt-1 opacity-50 group-hover:opacity-100 transition-opacity">
                    {item.iconLight && item.iconDark ? <>
                        <img src={item.iconLight} alt={item.title} className="w-8 h-8 spark-tabcard-img-light pointer-events-none" />
                        <img src={item.iconDark} alt={item.title} className="w-8 h-8 spark-tabcard-img-dark pointer-events-none" />
                      </> : <img src={item.icon} alt={item.title} className="w-8 h-8 pointer-events-none" />}
                  </div>
                  <div className="flex-1 flex flex-col gap-2">
                    <h3 className="spark-tabcard-title font-medium text-base leading-none">
                      {item.title}
                    </h3>
                     <div className="spark-tabcard-desc text-sm leading-snug">{item.desc}</div>
                  </div>
                </a>)}
            </div>
            <div className="group w-full h-full min-h-[324px] lg:w-1/2 lg:h-auto rounded-2xl overflow-hidden relative">
              {currentSub?.image ? <>
                <img src={currentSub.image.light} alt={currentSub.title} className="spark-tabcard-img-light absolute inset-0 w-full h-full object-cover rounded-2xl pointer-events-none" />
                <img src={currentSub.image.dark} alt={currentSub.title} className="spark-tabcard-img-dark absolute inset-0 w-full h-full object-cover rounded-2xl pointer-events-none" />
              </> : <div className="flex items-center justify-center h-full">
                  <p className="spark-tabcard-desc p-8">No preview available</p>
                </div>}
            </div>
          </div> : <p className="spark-tabcard-desc text-sm">
            No features available for this category.
          </p>}
      </div>
    </div>;
};

Spark is the fastest, cheapest, and most UX-friendly way to build financial apps and launch assets natively on Bitcoin. It's a Bitcoin platform that lets developers move Bitcoin and Bitcoin-native assets (including stablecoins) instantly, at near-zero cost, while staying fully connected to Bitcoin’s infrastructure.

***

## Quickstart

The fastest way to go from 0 to 1 on Spark

<Columns cols="2">
  <VCard title="Create a wallet" href="/quickstart/create-wallet" light="/images/quickstart/create-wallet-light.png" dark="/images/quickstart/create-wallet.png" description="Use the wallet-sdk to create a wallet and fund it in seconds" />

  <VCard title="Launch a token" href="/quickstart/launch-token" light="/images/quickstart/create-token-light.png" dark="/images/quickstart/create-token.png" description="Use the issuer-sdk to launch your own token on Bitcoin" />
</Columns>

<br />

***

## Build something

Spark makes Bitcoin fast enough to build on. Payments, wallets, stablecoins, and whatever comes next.

<TabCards
  categories={[
{
id: 'payments',
label: 'Payments',
items: [
  {
    id: 'p2p-banking-wallet',
    title: 'P2P/Banking Wallet',
    desc: 'Build self-custody wallets',
    iconLight: '/icons/icon-wallet-black.svg',
    iconDark: '/icons/icon-wallet-white.svg',
    image: {
      light: '/images/usecases/uc-p2p-wallet-light.png',
      dark: '/images/usecases/uc-p2p-wallet.png'
    }
  },
  {
    id: 'cross-border-payments',
    title: 'Cross-border Payments',
    desc: 'Pay anyone anywhere in the world',
    iconLight: '/icons/icon-globe-black.svg',
    iconDark: '/icons/icon-globe-white.svg',
    image: {
      light: '/images/usecases/uc-cross-border-light.png',
      dark: '/images/usecases/uc-cross-border.png'
    }
  },
  {
    id: 'social-tipping',
    title: 'Social Tipping',
    desc: 'Micro-payments to support creators',
    iconLight: '/icons/icon-tip-black.svg',
    iconDark: '/icons/icon-tip-white.svg',
    image: {
      light: '/images/usecases/uc-social-tipping-light.png',
      dark: '/images/usecases/uc-social-tipping.png'
    }
  },
  /* {
    id: 'merchant-payments',
    title: 'Merchant Payments',
    desc: 'Build the next generation of ecomm payments',
    href: '/start/create-wallet',
    iconLight: '/icons/icon-bag-black.svg',
    iconDark: '/icons/icon-bag-white.svg',
    image: {
      light: '/images/usecases/uc-merchant-payments-light.png',
      dark: '/images/usecases/uc-merchant-payments.png'
    }
  }, */
  {
    id: 'global-usd-accounts',
    title: 'Global USD Accounts',
    desc: 'Create USD accounts anywhere in the world',
    iconLight: '/icons/icon-usd-black.svg',
    iconDark: '/icons/icon-usd-white.svg',
    image: {
      light: '/images/usecases/uc-global-usd-light.png',
      dark: '/images/usecases/uc-global-usd.png'
    }
  }
]
},
{
id: 'defi',
label: 'DeFi',
items: [
  {
    id: 'defi-wallet',
    title: 'DeFi Wallet',
    desc: 'Self-custody wallets optimized for DeFi',
    iconLight: '/icons/icon-wallet-black.svg',
    iconDark: '/icons/icon-wallet-white.svg',
    image: {
      light: '/images/usecases/uc-defi-wallet-light.png',
      dark: '/images/usecases/uc-defi-wallet.png'
    }
  },
  {
    id: 'trading-platforms',
    title: 'Trading Platforms',
    desc: 'Build the fastest onchain DEX',
    iconLight: '/icons/icon-chart-black.svg',
    iconDark: '/icons/icon-chart-white.svg',
    image: {
      light: '/images/usecases/uc-trading-light.png',
      dark: '/images/usecases/uc-trading.png'
    }
  },
  {
    id: 'token-launchpad',
    title: 'Token Launchpad',
    desc: 'Create a platform to launch assets',
    iconLight: '/icons/icon-launch-black.svg',
    iconDark: '/icons/icon-launch-white.svg',
    image: {
      light: '/images/usecases/uc-launchpad-light.png',
      dark: '/images/usecases/uc-launchpad.png'
    }
  }
  /* ,
  {
    id: 'lending',
    title: 'Lending (coming soon)',
    desc: 'Enable borrowing and lending protocols on Bitcoin',
    iconLight: '/icons/icon-tip-black.svg',
    iconDark: '/icons/icon-tip-white.svg',
    image: {
      light: '/images/usecases/uc-lending-light.png',
      dark: '/images/usecases/uc-lending.png'
    }
  } */
]
},
{
id: 'rewards',
label: 'Rewards',
items: [
  {
    id: 'bitcoin-cashbacks',
    title: 'Bitcoin Cashbacks',
    desc: 'Let users earn BTC anytime they spend',
    iconLight: '/icons/icon-btc-black.svg',
    iconDark: '/icons/icon-btc-white.svg',
    image: {
      light: '/images/usecases/uc-cashbacks-light.png',
      dark: '/images/usecases/uc-cashbacks.png'
    }
  },
  {
    id: 'play-to-earn',
    title: 'Play to Earn',
    desc: 'Add P2E mechanics to your game',
    iconLight: '/icons/icon-game-black.svg',
    iconDark: '/icons/icon-game-white.svg',
    image: {
      light: '/images/usecases/uc-p2e-light.png',
      dark: '/images/usecases/uc-p2e.png'
    }
  },
  {
    id: 'referrals',
    title: 'Referrals',
    desc: 'Rewards users for growing your community',
    iconLight: '/icons/icon-users-black.svg',
    iconDark: '/icons/icon-users-white.svg',
    image: {
      light: '/images/usecases/uc-referrals-light.png',
      dark: '/images/usecases/uc-referrals.png'
    }
  },
  {
    id: 'point-conversions',
    title: 'Point Conversions',
    desc: 'Seamlessly convert points to BTC',
    iconLight: '/icons/icon-swap-black.svg',
    iconDark: '/icons/icon-swap-white.svg',
    image: {
      light: '/images/usecases/uc-points-light.png',
      dark: '/images/usecases/uc-points.png'
    }
  }
]
}
]}
/>

<br />

***

## Get to know Spark

Spark integrates with best-in-class infrastructure partners to help you ship faster

<Columns cols="2" className="gap-4">
  <HCard title="Grid" icon="/icons/icon-app-grid.svg" description="Global on-off ramps" href="/integrations/grid" />

  <HCard title="Privy" icon="/icons/icon-app-privy.svg" description="Authentication & wallet management" href="/integrations/privy" />

  <HCard title="Brale" icon="/icons/icon-app-brale.svg" description="Stablecoin issuance as a service" href="/integrations/brale" />

  <HCard title="Flashnet" href="/integrations/flashnet" icon="/icons/icon-app-flashnet.svg" description="Instant token swaps & AMM" />

  <HCard title="Garden" icon="/icons/icon-app-garden.svg" description="Trustless Bitcoin & token bridging" href="https://docs.garden.finance/" target="_blank" />

  <HCard title="Sparkscan" icon="/icons/icon-app-sparkscan.svg" description="An explorer on Spark" href="https://docs.sparkscan.io" target="_blank" />

  <HCard title="Tether WDK" icon="/icons/icon-app-wdk.svg" description="Tether's wallet development toolkit" href="https://docs.wallet.tether.io/sdk/wallet-modules/wallet-spark" target="_blank" />

  <HCard title="Dynamic" icon="/icons/icon-app-dynamic.svg" description="Web3 authentication" href="https://www.dynamic.xyz/docs/introduction/welcome" target="_blank" />

  <HCard title="Breez" icon="/icons/icon-app-breez.svg" description="Fully-featured Lightning SDK" href="/integrations/breez" target="_blank" />
</Columns>

<br />

***

## Building on Spark

<div className="hidden dark:block">
  <Columns cols="4" className="gap-8 py-8">
    <img src="https://mintcdn.com/lightspark/uYWAuFR6Cxtb0uSg/images/logos/logo-luminex-white.svg?fit=max&auto=format&n=uYWAuFR6Cxtb0uSg&q=85&s=18b27af2e0d69bce79b0b5de0f55346b" alt="Luminex" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-luminex-white.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-magiceden-white.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=7c66ff425f5e725d70fda32a2f711e5b" alt="Magic Eden" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-magiceden-white.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-tether-white.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=3184241e9e66ad60f67e9929b33d5216" alt="Tether" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-tether-white.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-xverse-white.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=f0b144042760fdf06c679b870f760240" alt="Xverse" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-xverse-white.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-thesis-white.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=5a4d24833a70eb1f5b4a9a20dc46abc0" alt="Thesis" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-thesis-white.svg" />

    <img src="https://mintcdn.com/lightspark/uYWAuFR6Cxtb0uSg/images/logos/logo-breez-white.svg?fit=max&auto=format&n=uYWAuFR6Cxtb0uSg&q=85&s=6664bc2f5462cc43eddfb86a6c505e98" alt="Breez" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-breez-white.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-wos2-white.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=c19f38661b6964b5220d91aa3d7ea406" alt="Wallet of Satoshi" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-wos2-white.svg" />

    <Button href="https://spark.money/ecosystem" target="_blank" outline>
      Ecosystem ->
    </Button>
  </Columns>
</div>

<div className="block dark:hidden">
  <Columns cols="4" className="gap-8 py-8">
    <img src="https://mintcdn.com/lightspark/uYWAuFR6Cxtb0uSg/images/logos/logo-luminex-black.svg?fit=max&auto=format&n=uYWAuFR6Cxtb0uSg&q=85&s=665655508e59bbc2e07a65005bbae282" alt="Luminex" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-luminex-black.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-magiceden-black.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=a8a5a09db98290cb891d01dec1180778" alt="Magic Eden" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-magiceden-black.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-tether-black.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=cef9e6c9dd8048d44153438ad93d461c" alt="Tether" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-tether-black.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-xverse-black.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=ae68e10c47ec24fa888a1774edd0dced" alt="Xverse" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-xverse-black.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-thesis-black.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=a12917629af70c7bfd7928b3bc82f41b" alt="Thesis" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-thesis-black.svg" />

    <img src="https://mintcdn.com/lightspark/uYWAuFR6Cxtb0uSg/images/logos/logo-breez-black.svg?fit=max&auto=format&n=uYWAuFR6Cxtb0uSg&q=85&s=2930e4d9bccd5dc726bca88d0581c8f5" alt="Breez" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-breez-black.svg" />

    <img src="https://mintcdn.com/lightspark/CRqc1AyyFGx260UN/images/logos/logo-wos2-black.svg?fit=max&auto=format&n=CRqc1AyyFGx260UN&q=85&s=33019713a4bd0850a8f3b8d8d3acd0be" alt="Wallet of Satoshi" className="h-7 opacity-60 hover:opacity-100 transition-opacity" width="128" height="32" data-path="images/logos/logo-wos2-black.svg" />

    <Button href="https://spark.money/ecosystem" target="_blank" outline>
      Ecosystem ->
    </Button>
  </Columns>
</div>