Usage
---
import { PlanCards } from '~/components';
import { getPlans } from '~/core/plan/server';
const plans = await getPlans();
---
<PlanCards title="Select a plan" plans={plans} />
import { PlanCards } from '~/components';
import { getPlans } from '~/core/plan/server';
export default async function Page() {
const plans = await getPlans();
return <PlanCards title="Select a plan" plans={plans} />;
}
Props
List of plans to display. (Plan) Title to display above the plans.
Text to display below the title.
Content
To update the plans, edit src/config/plan.ts. The plans are split into dev and production plans. The dev plans are shown in development mode, and the production plans are shown in production mode.
Make sure to update the stripePriceId with their respective Stripe price IDs.
import type { Plan } from '~/core/plan';
export const plans: Record<'dev' | 'production', Plan[]> = {
dev: [
{
id: 'starter',
name: 'Starter',
stripePriceId: 'price_...',
price: 10,
priceText: '$10 / month',
features: [
'Astro and Next.js boilerplate',
'Payments with Stripe',
'Auth - Lucia, Supabase & Clerk',
'React, Vue, Svelte, Solid & Preact',
'Drizzle & Prisma',
'PostgreSQL, MySQL, SQLite & more',
'Pre-built components',
],
notIncludedFeatures: [
'Private Discord community',
'Lifetime updates',
],
},
{
id: 'business',
name: 'Business',
stripePriceId: 'price_...',
price: 49,
priceText: '$49 / month',
isPopular: true,
features: [
'Astro and Next.js boilerplate',
'Payments with Stripe',
'Auth - Lucia, Supabase & Clerk',
'React, Vue, Svelte, Solid & Preact',
'Drizzle & Prisma',
'PostgreSQL, MySQL, SQLite & more',
'Pre-built components',
'Private Discord community',
'Lifetime updates',
],
},
],
production: [],
};
Types
Plan
import type { Plan } from '~/core/plan';
Unique identifier for the plan (.eg. starter, business).
The price of the plan as text (including the currency and term).
The Stripe price ID for the plan.
List of features included in the plan.
List of features not included in the plan.
Whether the plan should be marked as popular or not.
