Welcome to Pricecn, a collection of beautiful, open source and free components to build your app’s pricing and billing experience.

It’s built on top of Shadcn, the world’s most popular UI library, so you can get started easily and customize to your heart’s content.

​
Styles

The pricing-table component comes with 3 styles.

  • clean: the simplest variant, and the easiest to customize.
  • classic: inspired by modern minimalism. For AI and SaaS products.
  • dev: sharp, retro vibes. For a neo-developer aesthetic.

​
Install

npx shadcn@latest add https://pricecn.com/clean/pricing-table.json

This will download the pricing-table component in your components directory. You can swap clean for any of the styles above.

​
Define your product schema

Pricing components can be involved and tricky to manage on the frontend, especially when pricing changes happen. pricing-table can automatically generate based on a simple product schema you define.

type Product = {
  id: string; //an ID you'll pass into a <PricingCard> to render it
  name: string; //the name of the product (eg, Pro)
  description?: string; //product description
  recommendedText?: string; //for emphasized products (eg, "Best Value")
  price: {
    primaryText: string; //product main price
    secondaryText?: string; //pricing details (eg, per user, per month)
  };
  priceAnnual?: {
    primaryText: string; //annual price variant
    secondaryText?: string; //pricing details for the annual variant
  };
  buttonText: string; //text for the <PricingCard> button
  everythingFrom?: string; //renders a "Everything from X, and" string
  items: {
    primaryText: string; //features available, (eg, 5 seats included)
    secondaryText?: string; //extra text, usually for pricing (eg, then $10USD per seat)
  }[]; //items is an array
};

LLMs are good at auto generating this schema from a screenshot!

​
Usage

An example usage of <PricingTable /> will be downloaded as components/pricing/example.tsx. This file demonstrates how to define your products and pass them into the PricingTable component.

import { PricingTable, PricingCard, Product } from "./pricing-table";

export const products: Product[] = [
  {
    id: "hobby",
    name: "Hobby",
    description: "For personal projects and small-scale applications.",
    price: { primaryText: "Free", secondaryText: "up to 3 users" },
    buttonText: "Start deploying",
    items: [
      { primaryText: "Deploy full-stack apps in minutes" },
      { primaryText: "Fully-managed datastores" },
      // ...more features
    ],
  },
  // ...more products
];

export const PricingTableExample = () => (
  <PricingTable products={products} showFeatures={true}>
    <PricingCard productId="hobby" />
    <PricingCard productId="professional" />
    <PricingCard productId="enterprise" buttonProps={{
onClick: () => {
console.log("Button Clicked");
}
}}/>
  </PricingTable>
);

<PricingCard> can also take in buttonProps , allowing you to define an onClick() function.

​
Coming soon

  • Paywalls
  • Billing pages
  • Feature tables
  • Usage meters