> ## Documentation Index
> Fetch the complete documentation index at: https://unevenlabs-docs-drift-src-aa153b3060-2d3471a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Add swaps and bridging to your app with the SDK, React hooks, and UI components

Add swaps and bridging to your app with RelayKit. Use the SDK and React hooks to build your own experience, or embed ready-made UI components to get started. RelayKit handles fetching quotes, executing transaction steps, and tracking requests.

<div id="ui-kit-overview-cards">
  <CardGroup cols={1}>
    <Card title="SDK" icon="screwdriver-wrench" iconType="solid">
      Craft an engaging and thoughtful user experience while the SDK takes care of fetching and executing quotes<br />
      <a href="/references/relay-kit/sdk/installation" className="card-link"><b>Docs</b></a>
      <span style={{ margin: '0px 6px'}}>|</span>
      <a href="https://github.com/relayprotocol/relay-kit/tree/main/packages/sdk" target="_blank" className="card-link"><b>Github</b></a>
    </Card>

    <Card title="Hooks" icon={<svg viewBox="0 0 72 72" id="emoji" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff" transform="rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.144"></g><g id="SVGRepo_iconCarrier"> <g id="color"> <path fill="#4615C8" d="M28.3493,64.0547a14.1852,14.1852,0,0,1-9.08-25.083,1,1,0,0,1,1.6318.8994c-.7138,5.3779,5.1221,9.1143,5.1817,9.1514a1.0006,1.0006,0,0,1-.5313,1.8476H20.9782a7.438,7.438,0,0,0,14.8086-1V23a8.91,8.91,0,1,1,6.747.2344V49.87A14.2007,14.2007,0,0,1,28.3493,64.0547ZM39.445,12.7188a2.1643,2.1643,0,1,0,2.164,2.164A2.1664,2.1664,0,0,0,39.445,12.7188Z"></path> </g> <g id="line"> <path fill="none" stroke="#4615C8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M25.5511,49.87s-6.4505-4.0285-5.64-10.1295L19.91,39.74A13.1848,13.1848,0,1,0,41.5335,49.87V22.5059a7.9115,7.9115,0,1,0-4.7465-.18V49.87a8.4382,8.4382,0,1,1-16.8763,0h.8339M41.2972,17.4489a3.1645,3.1645,0,1,1,1.3123-2.566"></path> </g> </g></svg>}>
      Powerful hooks that make fetching and executing quotes in React a breeze <br />
      <a href="/references/relay-kit/hooks/installation" className="card-link"><b>Docs</b></a>
      <span style={{ margin: '0px 6px'}}>|</span>
      <a href="" className="card-link"><b>Github</b></a>
    </Card>

    <Card title="UI" icon="palette" iconType="solid">
      Jumpstart your Relay integration by embedding our fully featured widget <br />
      <a href="/references/relay-kit/ui/installation" className="card-link"><b>Docs</b></a>
      <span style={{ margin: '0px 6px'}}>|</span>
      <a href="" className="card-link"><b>Github</b></a>
    </Card>
  </CardGroup>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.