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

# Getting Started

# Overview

The Skip Go `Widget` is the easiest way to onboard users and capital from anywhere in the world to your corner of the sovereign web! The widget provides seamless cross-chain bridging, swapping, and transferring functionality in an easy to integrate React or [Web component](./web-component).

<Info>
  Want to experiment with the widget before integrating it?
  Check out our interactive builder: [studio.skip.build](https://studio.skip.build) — experiment visually and generate ready-to-use code for your app!
</Info>

# Useful Links

* [Skip Go Repository](https://github.com/skip-mev/skip-go)
* [Example Widget Implementation](https://github.com/skip-mev/skip-go/tree/main/examples/nextjs)

# Quickstart Guide

This guide will walk you through how to integrate the `Widget` into your React app.

<Info>
  Starting from scratch? It's recommended to use a React framework like [Next.js](https://nextjs.org/docs/getting-started/installation) or [Create React App](https://create-react-app.dev/docs/getting-started) to get up and running quickly.
</Info>

<Steps>
  <Step title="Installation">
    <CodeGroup>
      ```shell NPM theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
      npm install @skip-go/widget
      ```

      ```shell Yarn theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
      yarn add @tanstack/react-query viem wagmi
      ```
    </CodeGroup>

    <Info>
      If you're using `yarn` (or another package manager that doesn't install peer dependencies by default)
      you may need to install these peer dependencies as well:

      ```bash theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
        yarn add @tanstack/react-query viem wagmi
      ```
    </Info>
  </Step>

  <Step title="Import the Widget Component">
    Next, use the `Widget` component to render the swap interface:

    ```typescript theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
    import { Widget } from '@skip-go/widget';

    const SwapPage = () => {
      return (
        <div
          style={{
            width: '100%',
            maxWidth: '500px',
            padding: '0 10px',
          }}
        >
          <Widget
            theme="light"
            brandColor="#FF4FFF"
          />
        </div>
      );
    };
    ```

    <Tip>
      You can use the code generated by [studio.skip.build](https://studio.skip.build) directly in your integration below.
    </Tip>
  </Step>

  <Step title="Configuration">
    Now that you have the widget integrated, it's time to configure the user experience. Find more details on widget configuration [here](./configuration).
  </Step>
</Steps>

<Info>
  If there's any functionality or configurations you'd like to see in the widget, we'd love for you to contribute by opening up an issue or pull request in [the repository](https://github.com/skip-mev/skip-go/tree/main/packages/widget) or by joining [our Discord](https://discord.com/invite/interchain) and giving us a shout!
</Info>