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

# Layerswap Developer Docs

> Build cross-chain bridging and swapping into your product with Layerswap.

<div className="mx-auto max-w-6xl px-6 py-12 sm:py-16 lg:px-8">
  <div className="overflow-hidden rounded-3xl border border-pink-400/20 bg-gradient-to-br from-[#3A102A] via-[#21101D] to-[#0C0A0E] px-6 py-20 text-center shadow-2xl sm:px-12 sm:py-24">
    <img src="https://mintcdn.com/layerswaplabsv0/FV_A8La0B6aNU1i5/logo/dark.svg?fit=max&auto=format&n=FV_A8La0B6aNU1i5&q=85&s=f11f5d8b51b7b9fb15604fc8d8e65572" alt="Layerswap" className="mx-auto mb-8 h-auto w-52 sm:w-64" width="393" height="100" data-path="logo/dark.svg" />

    <h1 className="mb-4 text-4xl font-semibold tracking-tight text-white sm:text-5xl">
      Layerswap Developer Docs
    </h1>

    <p className="mx-auto mb-0 max-w-2xl text-lg text-white/70 sm:text-xl">
      Add cross-chain bridging and swapping to your product.
    </p>
  </div>

  <div className="mt-10">
    <CardGroup cols={3}>
      <Card title="Choose an integration" icon="route" href="/get-started/choose-your-integration">
        Compare the Widget, Hosted Page, and API to find the right approach.
      </Card>

      <Card title="Swap Widget quickstart" icon="arrow-right-arrow-left" href="/widget/quickstart">
        Add bridging and swapping directly to your interface in minutes.
      </Card>

      <Card title="API quickstart" icon="server" href="/api/quickstart">
        Control the full swap lifecycle from your backend.
      </Card>
    </CardGroup>
  </div>

  <div className="mt-12 border-t border-gray-200 pt-8 dark:border-white/10">
    <p className="mb-4 text-sm font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
      Explore Layerswap
    </p>

    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      <a href="/get-started/what-is-layerswap" className="font-medium no-underline hover:text-pink-500">
        What is Layerswap? →
      </a>

      <a href="/get-started/networks-and-tokens" className="font-medium no-underline hover:text-pink-500">
        Networks and tokens →
      </a>

      <a href="/concepts/security" className="font-medium no-underline hover:text-pink-500">
        Security →
      </a>

      <a href="/api-reference/swaps/get-networks" className="font-medium no-underline hover:text-pink-500">
        API reference →
      </a>
    </div>
  </div>
</div>