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

# Sample apps

> Open-source reference applications for building on Arc with Circle developer tools, including payment flows, stablecoin FX, DeFi protocols, multichain wallets, and treasury management.

export const SampleAppCard = ({title, description, href, urlLabel, tags = [], image}) => {
  const dot = "w-2.5 h-2.5 rounded-full";
  return <a href={href} className="block h-full no-underline group not-prose">
      <div className="h-full flex flex-col rounded-xl border border-gray-200 dark:border-white/10 bg-[#FFFFFF] dark:bg-[#142236] overflow-hidden transition-all duration-200 group-hover:border-gray-300 dark:group-hover:border-white/25 group-hover:shadow-lg group-hover:-translate-y-0.5">
        <div className="p-3 bg-gray-100 dark:bg-[#0C1117] border-b border-gray-200 dark:border-white/[0.06]">
          <div className="rounded-lg border border-gray-200 dark:border-white/10 bg-[#FFFFFF] dark:bg-[#0D1B2F] overflow-hidden">
            <div className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-gray-200 dark:border-white/10 bg-[#FFFFFF] dark:bg-[#172437]">
              <span className={`${dot} bg-red-400/70 dark:bg-red-400/60`} />
              <span className={`${dot} bg-yellow-400/70 dark:bg-yellow-400/60`} />
              <span className={`${dot} bg-green-400/70 dark:bg-green-400/60`} />
              {urlLabel && <span className="ml-2 text-[10px] text-gray-500 dark:text-[#888] font-mono truncate">
                  {urlLabel}
                </span>}
            </div>
            <div role="img" aria-label={title} className="relative aspect-[16/10] overflow-hidden bg-no-repeat bg-top bg-cover" style={image ? {
    backgroundImage: `url(${image})`
  } : undefined}>
              {!image && <div className="absolute inset-0 flex items-center justify-center text-[11px] text-gray-400 dark:text-[#666]">
                  screenshot pending
                </div>}
            </div>
          </div>
          {tags.length > 0 && <div className="flex flex-wrap items-center gap-1.5 mt-3">
              {tags.map(tag => <span key={tag} className="text-[11px] px-2.5 py-0.5 rounded-full bg-[#FFFFFF] dark:bg-[#1F2F44] text-gray-700 dark:text-[#C7C5D1] font-medium border border-gray-200 dark:border-white/10">
                  {tag}
                </span>)}
            </div>}
        </div>
        <div className="flex-1 p-4 flex flex-col gap-2.5">
          <p className="block text-sm font-semibold text-gray-900 dark:text-white !m-0 group-hover:text-[#3E74BB] dark:group-hover:text-[#ACC6E9] transition-colors">
            {title}
          </p>
          <p className="block text-[13px] leading-relaxed text-gray-600 dark:text-[#C7C5D1] !m-0">
            {description}
          </p>
        </div>
      </div>
    </a>;
};

Explore sample apps for Arc. Each app is an open-source reference implementation
you can clone, run locally, and adapt for your own project.

## Payments and checkout

<Columns cols={3}>
  <SampleAppCard title="Arc commerce" description="USDC credit purchases with developer-controlled wallets and webhook-driven settlement." href="/build/sample-apps/arc-commerce" urlLabel="arc-commerce" tags={["Next.js", "Wallets"]} image="https://mintcdn.com/arcio-docs/XZRgcvxGo4mVsoog/images/sample-apps/arc-commerce.png?fit=max&auto=format&n=XZRgcvxGo4mVsoog&q=85&s=109529158777c3c50398694a42035284" width="830" height="646" data-path="images/sample-apps/arc-commerce.png" />

  <SampleAppCard title="Arc P2P payments" description="Gasless peer-to-peer USDC payments secured by passkey-protected modular wallets." href="/build/sample-apps/arc-p2p-payments" urlLabel="arc-p2p" tags={["Modular Wallets", "Passkeys"]} image="https://mintcdn.com/arcio-docs/Qc372SctU3s7ckPs/images/sample-apps/arc-p2p-payments.png?fit=max&auto=format&n=Qc372SctU3s7ckPs&q=85&s=4de4438f76c8a53ae6773bff54b31240" width="723" height="1584" data-path="images/sample-apps/arc-p2p-payments.png" />

  <SampleAppCard title="Arc escrow" description="AI-validated freelance escrow with USDC settlement through the Refund Protocol." href="/build/sample-apps/arc-escrow" urlLabel="workflow-escrow" tags={["Refund Protocol", "AI"]} image="https://mintcdn.com/arcio-docs/Qc372SctU3s7ckPs/images/sample-apps/arc-escrow.png?fit=max&auto=format&n=Qc372SctU3s7ckPs&q=85&s=829c9476869316f75e2235796f279d49" width="1920" height="1080" data-path="images/sample-apps/arc-escrow.png" />

  <SampleAppCard title="Arc nanopayments" description="Autonomous AI agent pays for paywalled API endpoints in USDC fractions using the x402 protocol." href="/build/sample-apps/arc-nanopayments" urlLabel="arc-nanopayments" tags={["Nanopayments", "AI"]} image="https://mintcdn.com/arcio-docs/ACSVsyrkw0hvwBO8/images/sample-apps/arc-nanopayments.png?fit=max&auto=format&n=ACSVsyrkw0hvwBO8&q=85&s=e667e5aa0b7e871de8f1a546120b4394" width="1920" height="1080" data-path="images/sample-apps/arc-nanopayments.png" />
</Columns>

## Wallets and treasury

<Columns cols={3}>
  <SampleAppCard title="Arc multichain wallet" description="Unified USDC balance and crosschain transfers powered by Circle Gateway." href="/build/sample-apps/arc-multichain-wallet" urlLabel="multichain-wallet" tags={["Gateway", "Wagmi"]} image="https://mintcdn.com/arcio-docs/Qc372SctU3s7ckPs/images/sample-apps/arc-multichain-wallet.png?fit=max&auto=format&n=Qc372SctU3s7ckPs&q=85&s=1393eda2c30a4b13c9c967bfb1a262a6" width="830" height="658" data-path="images/sample-apps/arc-multichain-wallet.png" />

  <SampleAppCard title="Arc fintech" description="Multichain treasury console with crosschain capital movement through Bridge Kit." href="/build/sample-apps/arc-fintech" urlLabel="fintech-starter" tags={["Bridge Kit", "Gateway"]} image="https://mintcdn.com/arcio-docs/Qc372SctU3s7ckPs/images/sample-apps/arc-fintech.png?fit=max&auto=format&n=Qc372SctU3s7ckPs&q=85&s=2ae61c49002c504e08f7af0f48306533" width="1605" height="1163" data-path="images/sample-apps/arc-fintech.png" />
</Columns>

## Stablecoin FX

<Columns cols={3}>
  <SampleAppCard title="Arc stablecoin FX" description="Real-time USDC and EURC swaps with configurable platform fee collection through the App Kit Swap SDK." href="/build/sample-apps/arc-stablecoin-fx" urlLabel="arc-stablecoin-fx" tags={["App Kit", "Swap"]} image="https://mintcdn.com/arcio-docs/ACSVsyrkw0hvwBO8/images/sample-apps/arc-stablecoin-fx.png?fit=max&auto=format&n=ACSVsyrkw0hvwBO8&q=85&s=ce351a421a608df0fce9e2c5d4621ccf" width="1920" height="1080" data-path="images/sample-apps/arc-stablecoin-fx.png" />
</Columns>

## DeFi

<Columns cols={3}>
  <SampleAppCard title="Arc DeFi lend and borrow" description="Collateralized lending protocol: deposit cirBTC and borrow USDC against it using a custom lending smart contract." href="/build/sample-apps/arc-defi-lend-borrow" urlLabel="arc-defi-lend-borrow" tags={["DeFi", "Hardhat"]} image="https://mintcdn.com/arcio-docs/ACSVsyrkw0hvwBO8/images/sample-apps/arc-defi-lend-borrow.png?fit=max&auto=format&n=ACSVsyrkw0hvwBO8&q=85&s=98b92ad30577a82c77e15f886e1e85ac" width="1920" height="1080" data-path="images/sample-apps/arc-defi-lend-borrow.png" />

  <SampleAppCard title="Arc prediction markets" description="Decentralized prediction markets with UMA Optimistic Oracle V2 resolution and a constant-product AMM for position token trading." href="/build/sample-apps/arc-prediction-markets" urlLabel="arc-prediction-markets" tags={["Prediction Markets", "UMA"]} image="https://mintcdn.com/arcio-docs/ACSVsyrkw0hvwBO8/images/sample-apps/arc-prediction-markets.png?fit=max&auto=format&n=ACSVsyrkw0hvwBO8&q=85&s=98f0f9464554cc1b1f424b002b02f0e2" width="1920" height="1080" data-path="images/sample-apps/arc-prediction-markets.png" />
</Columns>
