> ## Documentation Index
> Fetch the complete documentation index at: https://anypay-docs-update-resources-2026-06-29.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Integrate Trails in under 5 minutes

## Install

<CodeGroup>
  ```shell npm theme={null}
  npm install 0xtrails
  ```

  ```shell pnpm theme={null}
  pnpm add 0xtrails
  ```

  ```shell yarn theme={null}
  yarn add 0xtrails
  ```

  ```shell bun theme={null}
  bun add 0xtrails
  ```
</CodeGroup>

## Add a component

Pick the component that matches your use case and import it from `0xtrails/widget`:

```tsx theme={null}
import { Fund } from '0xtrails/widget'

export function Deposit() {
  return (
    <Fund
      apiKey="YOUR_API_KEY"
      to={{
        recipient: "0xYourAddress",
        currency: "USDC",
        chain: "base",
      }}
    />
  )
}
```

User deposits any token from any chain. Arrives as USDC on Base.

<Note>
  **Get an API key**: Sign up and create an API key on the [Trails Dashboard](https://dashboard.trails.build/landing)
</Note>

## Components

| Component      | Use case                                             |
| -------------- | ---------------------------------------------------- |
| `<Pay />`      | Accept a fixed payment (e.g. 25 USDC) to a recipient |
| `<Fund />`     | Deposit funds into a wallet, chain, or protocol      |
| `<Swap />`     | Cross-chain token exchange                           |
| `<Withdraw />` | Off-ramp or move funds out                           |
| `<Earn />`     | DeFi yield deposits                                  |

All are imported from `0xtrails/widget`.

## Starter Templates

<CardGroup cols={3}>
  <Card title="Live Demo" icon="play" href="https://demo.trails.build/widget">
    Try it now
  </Card>

  <Card title="React" icon="react" href="https://github.com/0xsequence-demos/trails-starter">
    Starter kit
  </Card>

  <Card title="Next.js" icon="code" href="https://github.com/0xsequence-demos/trails-nextjs-starter">
    Starter kit
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Pay" icon="credit-card" href="/use-cases/pay">
    Stablecoin payments, merchant integration
  </Card>

  <Card title="Swap" icon="arrows-rotate" href="/use-cases/swap">
    Cross-chain token swaps
  </Card>

  <Card title="Fund" icon="wallet" href="/use-cases/fund">
    Protocol deposits, chain onboarding, built-in onramps
  </Card>

  <Card title="Earn" icon="chart-line" href="/use-cases/earn">
    Integrated DeFi yield deposits
  </Card>
</CardGroup>

***

**Full reference**: [SDK Configuration](/sdk/configuration) · [API Reference](/api-reference/introduction) · [Hooks](/sdk/hooks)