​
Usage

---
import { PlanCards } from '~/components';
import { getPlans } from '~/core/plan/server';

const plans = await getPlans();
---

<PlanCards title="Select a plan" plans={plans} />

​
Props

​
plans
Plan[]
required

List of plans to display. (Plan)

​
title
string

Title to display above the plans.

​
text
string

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 starter kits',
        '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 starter kits',
        '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';
​
id
string
required

Unique identifier for the plan (.eg. starter, business).

​
name
string
required

The name of the plan.

​
price
number
required

The price of the plan.

​
priceText
string
required

The price of the plan as text (including the currency and term).

​
stripePriceId
string
required

The Stripe price ID for the plan.

​
features
string[]
required

List of features included in the plan.

​
notIncludedFeatures
string[]

List of features not included in the plan.

​
isPopular
boolean

Whether the plan should be marked as popular or not.

HeroStatement