4-column Pricing Page

Example of image on pricing page

See how to use the pricing page component to add an image

Live Demo

How to add an image to the pricing plans

1. Update the PricingTier interface

export interface PricingTier {
  name: string;
  id: string;
  href: string;
  discountPrice: string | Record<string, string>;
  price: string | Record<string, string>;
  description: string | React.ReactNode;
  features: string[];
  featured?: boolean;
  highlighted?: boolean;
  cta: string;
  soldOut?: boolean;
  image?: React.ReactNode;
}

2. Add the image to each of the items in the pricingTiers array

export const pricingTiers: PricingTier[] = [
  {
    name: 'Free',
    id: '0',
    href: '/subscribe',
    price: { '1': '$0', '2': '$0' },
    discountPrice: { '1': '', '2': '' },
    description: `Get all goodies for free, no credit card required.`,
    features: [
      `Multi-platform compatibility`,
      `Real-time notification system`,
      `Advanced user permissions`,
    ],
    featured: false,
    highlighted: false,
    soldOut: false,
    cta: `Sign up`,
    image: <img src="/static/images/backdrop-1.webp" alt="Free" />,
  },
  // ...
  // do the same for the other items if any
];

3. Add the image to the pricing page app/pricing/page.tsx

// ...find where the description is rendered and add {image} under it (or anywhere you want the image to be displayed)
    <p
      className={cn(
        tier.featured
          ? 'text-gray-300 dark:text-gray-500'
          : 'text-gray-600 dark:text-gray-400',
        'mt-4 text-sm leading-6',
      )}
    >
      {tier.description}

      {/* Display the image here */}
      {tier.image}
    </p>
// ...

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

• How to add an image to the pricing plans
• 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.