Veloz Documentation

Pricing page

Veloz kit provides a reusable pricing page component which can be imported into whatever page you want it to be used on.

Nextjs

This component can be found src/components/landing/pricing/index.tsx.

page.tsx


_10import { Pricing } from "@/components/landing";
_10
_10export default function Page() {
_10  return <Pricing />;
_10}

You should get similar result below.

Customization

The pricing plan component simply uses data coming from src/data/pricing/plan.ts. Learn more about configuring your pricing plans.

As for the features listed on each pricing plan cards, they are also coming from src/data/pricing/features.ts file.

⚠️

Notice the feature has an id, this property must match what is in the plan data, else it will not be displayed. Also the isAvailable property is used to determine if the feature is available for that plan or not.

features.ts


_23const pricingPlanFeatures = [
_23  {
_23    id: "lite_84507",
_23    features: [
_23      {
_23        title: "1 User",
_23        isAvailable: true,
_23      },
_23      {
_23        title: "3 Projects",
_23        isAvailable: true,
_23      },
_23      {
_23        title: "Email Support",
_23        isAvailable: false,
_23      },
_23      {
_23        title: "Lifetime Updates",
_23        isAvailable: false,
_23      },
_23    ],
_23  },
_23];

SEO Email