4-column Pricing Page

Example of 4-columns pricing page

See how to use the pricing page component to add 4 pricing plans.

Live Preview

How to add a 4-column pricing page

1. Add a new tier data/config/pricingData.tsx

// ...

export const pricingTiers: PricingTier[] = [
  // ...add a new pricing tier
  {
    name: 'Pro Max',
    id: '2',
    href: '/subscribe',
    price: { '1': '$4.99', '2': '$59.99' },
    discountPrice: { '1': '', '2': '' },
    description: `Add the maximum amount of power and flexibility.`,
    features: [
      `All in the pro plan plus`,
      `File versioning`,
      `Advanced user permissions`,
    ],
    featured: false,
    highlighted: true,
    soldOut: false,
    cta: `Get started`,
  },
  // ...
];

2. Handle the 4-tier layout in app/pricing/page.tsx. Add a new condition for the 4-column layout: tiers.length === 4 ? 'lg:grid-cols-2 xl:grid-cols-4' : ''.

// ...
    <div
      className={cn(
        'isolate mx-auto mt-4 mb-28 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none',
        tiers.length === 2 ? 'lg:grid-cols-2' : '',
        tiers.length === 3 ? 'lg:grid-cols-3' : '',
        tiers.length === 4 ? 'lg:grid-cols-2 xl:grid-cols-4' : '',
      )}
    >
// ...

---

This website was generated with shipixen.com. For more documentation, visit the shipixen Docs.

• How to add a 4-column pricing page
• Installation
• Development
• Build
• Deploy
• Extend / Customize
• Post
• Frequently Asked Questions
  • How can I add a custom MDX component?
  • How can I add a blog layout?
  • How to add meta tags?

Installation

npm i

Development

First, run the development server:

npm run dev

Build

To build the site for production, run the following command:

npm run build

Deploy

Vercel

The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.

Netlify

Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images, etc.

See Next.js on Netlify for suggested configuration values and more details.

Static hosting services / GitHub Pages / S3 / Firebase etc.

See documentation for more information on deploying to other services.

Extend / Customize

See configuration docs.

Also check out:

• Customizing the landing page - how to customize the landing page
• Landing page component examples
• Landing page templates
• Component explorer - an overview of all UI components available in the template
• Color theme explorer
• Pricing page generator

Post

Posts on the Shipixen blog are written in Markdown and stored in the /data directory. To create a new post, make a new .mdx file in the /data directory.

Learn how to write blog posts in mdx.

Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.

Frequently Asked Questions

How can I add a custom MDX component?

You need to include the component under components/MDXComponents.tsx.

See a full example here.

How can I add a blog layout?

See this tutorial on how to add a blog layout.

How to add meta tags?

There's a utility function, getPageMetadata that makes it easy to add meta tags to your pages. See this tutorial for more information.