useListPlans hook fetches all available plans configured in your Autumn dashboard. Use this to build custom pricing pages or plan selectors.
Parameters
UseQueryOptions
Optional TanStack Query options to customize caching and refetching behavior.
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Fetch the list of available plans
useListPlans hook fetches all available plans configured in your Autumn dashboard. Use this to build custom pricing pages or plan selectors.
dataimport { 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>
);
}
Show Plan object
{
"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
}
isLoadingerrorrefetch()