> ## 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, multichain wallets, escrow automation, 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" />
</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>
