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

# useListPlans

> Fetch the list of available plans

The `useListPlans` hook fetches all available plans configured in your Autumn dashboard. Use this to build custom pricing pages or plan selectors.

<Tip>
  Learn how to setup Autumn hooks in the [Getting Started](/documentation/getting-started/setup) guide.
</Tip>

## Parameters

<ParamField body="queryOptions" type="UseQueryOptions">
  Optional [TanStack Query options](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) to customize caching and refetching behavior.
</ParamField>

## Returns

### `data`

Array of plan objects.

```tsx theme={null}
import { useListPlans } from "autumn-js/react";

export default function PlansList() {
  const { data, isLoading } = useListPlans();

  if (isLoading) return <div>Loading plans...</div>;

  return (
    <ul>
      {data?.map((plan) => (
        <li key={plan.id}>
          {plan.name} - {plan.price ? `$${plan.price.amount}/${plan.price.interval}` : 'Free'}
        </li>
      ))}
    </ul>
  );
}
```

<Expandable title="Plan object">
  ```json theme={null}
  {
    "id": "pro",
    "name": "Pro Plan",
    "description": null,
    "group": null,
    "version": 1,
    "addOn": false,
    "autoEnable": false,
    "price": {
      "amount": 10,
      "interval": "month"
    },
    "items": [
      {
        "featureId": "messages",
        "included": 1000,
        "unlimited": false,
        "reset": { "interval": "month" },
        "price": null
      }
    ],
    "freeTrial": null,
    "createdAt": 1771513979217,
    "env": "sandbox",
    "archived": false,
    "baseVariantId": null
  }
  ```
</Expandable>

### `isLoading`

Boolean indicating whether the plans are currently being fetched.

### `error`

Any error that occurred while fetching plans.

### `refetch()`

Function to manually refetch the plans list.