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

# Introduction

> Welcome to Flowglad's guides! Here you can find guides on how to implement Flowglad across various different frameworks and pricing models.

<Note>Before getting started, make sure to [sign up](https://app.flowglad.com/sign-up) for a Flowglad account and a obtain test API key from [settings](https://app.flowglad.com/settings).</Note>

You can checkout guides by framework or read more about the [pricing models](/guides/pricing-models) we cover in these guides.

## Next.js

<CardGroup cols={2}>
  <Card title="Generation-Based Subscription" icon="https://mintcdn.com/flowglad/3nFx-hKFSZZP8--F/images/nextjs.svg?fit=max&auto=format&n=3nFx-hKFSZZP8--F&q=85&s=1287ccbd826170ec7aab88a678be2eb3" href="/guides/nextjs/generation-based-subscription" width="24" height="24" data-path="images/nextjs.svg">
    A hybrid billing model combining subscriptions with usage credits and one-time top-ups.
  </Card>

  <Card title="Pay As You Go" icon="https://mintcdn.com/flowglad/3nFx-hKFSZZP8--F/images/nextjs.svg?fit=max&auto=format&n=3nFx-hKFSZZP8--F&q=85&s=1287ccbd826170ec7aab88a678be2eb3" href="/guides/nextjs/pay-as-you-go" width="24" height="24" data-path="images/nextjs.svg">
    Pure usage-based billing where customers purchase credit packs and consume them over time.
  </Card>

  <Card title="Tiered Usage-Gated Subscription" icon="https://mintcdn.com/flowglad/3nFx-hKFSZZP8--F/images/nextjs.svg?fit=max&auto=format&n=3nFx-hKFSZZP8--F&q=85&s=1287ccbd826170ec7aab88a678be2eb3" href="/guides/nextjs/tiered-usage-gated-subscription" width="24" height="24" data-path="images/nextjs.svg">
    A subscription model with multiple tiers where different features have monthly usage limits.
  </Card>

  <Card title="Usage Limit Subscription" icon="https://mintcdn.com/flowglad/3nFx-hKFSZZP8--F/images/nextjs.svg?fit=max&auto=format&n=3nFx-hKFSZZP8--F&q=85&s=1287ccbd826170ec7aab88a678be2eb3" href="/guides/nextjs/usage-limit-subscription" width="24" height="24" data-path="images/nextjs.svg">
    A subscription model with included usage credits that renew each billing period.
  </Card>
</CardGroup>

## React + Vite

<CardGroup cols={2}>
  <Card title="Generation-Based Subscription" icon="react" href="/guides/react-vite/generation-based-subscription">
    A hybrid billing model combining subscriptions with usage credits and one-time top-ups.
  </Card>
</CardGroup>

## Tanstack Start

<CardGroup cols={2}>
  <Card title="Generation-Based Subscription" icon="https://mintcdn.com/flowglad/3nFx-hKFSZZP8--F/images/tanstack.svg?fit=max&auto=format&n=3nFx-hKFSZZP8--F&q=85&s=923c92e3158612e653f629672bd743ef" href="/guides/tanstack-start/generation-based-subscription" width="24" height="24" data-path="images/tanstack.svg">
    A hybrid billing model combining subscriptions with usage credits and one-time top-ups.
  </Card>
</CardGroup>
