Plan Cards - ShipKit Docs

Usage

Astro
Next.js

---
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

Plan[]

required

List of plans to display. (Plan)

string

Title to display above the plans.

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 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';

string

required

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

string

required

The name of the plan.

number

required

The price of the plan.

string

required

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

string

required

The Stripe price ID for the plan.

string[]

required

List of features included in the plan.

string[]

List of features not included in the plan.

boolean

Whether the plan should be marked as popular or not.

​Usage

​Props

​Content

​Types

​Plan

Usage

Props

Content

Types

Plan