Blocks

Pricing

A pricing table: plan cards with price, features and a call to action, optionally with a monthly/yearly switch. The featured plan gets the accent.

Simple pricing

Start free, upgrade when your team grows.

Solo
For side projects.
€0/ month
Start free
- All components
- Community support
Studio
Popular
For freelancers.
€19/ month
Choose Studio
- Everything in Solo
- Blocks
- Email support
Team
For small teams.
€49/ month
Choose Team
- Everything in Studio
- Priority support
- Design files

demos/pricing.tsx

import { Pricing } from "pixelbits/blocks/pricing";

export default function Demo() {
  return (
    <Pricing
      className="py-4 sm:py-4"
      title="Simple pricing"
      description="Start free, upgrade when your team grows."
      billingToggle
      yearlyLabel="Yearly −20%"
      plans={[
        {
          name: "Solo",
          price: { monthly: "€0", yearly: "€0" },
          description: "For side projects.",
          features: ["All components", "Community support"],
          cta: { label: "Start free", href: "#start" },
        },
        {
          name: "Studio",
          price: { monthly: "€19", yearly: "€15" },
          description: "For freelancers.",
          features: ["Everything in Solo", "Blocks", "Email support"],
          cta: { label: "Choose Studio", href: "#studio" },
          featured: true,
        },
        {
          name: "Team",
          price: { monthly: "€49", yearly: "€39" },
          description: "For small teams.",
          features: ["Everything in Studio", "Priority support", "Design files"],
          cta: { label: "Choose Team", href: "#team" },
        },
      ]}
    />
  );
}

Installation

npm: import

import { Pricing } from "pixelbits/pricing";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/block-pricing.json

API

<Pricing>

A pricing table: plan cards with price, features and a call to action, optionally with a monthly/yearly switch. The featured plan gets the accent.

Example

<Pricing
  title="Simple pricing"
  billingToggle
  plans={[
    { name: "Studio", price: { monthly: "€19", yearly: "€15" }, features: ["All components"], cta: { label: "Start", href: "/start" } },
    { name: "Team", price: { monthly: "€49", yearly: "€39" }, features: ["Everything in Studio"], cta: { label: "Start" }, featured: true },
  ]}
/>

Prop	Type	Default	Description
title	ReactNode	—	Section heading (an `<h2>`).
description	ReactNode	—	Text under the heading.
plans*	Plan[]	—	The plans, left to right.
billingToggle	boolean	false	Show a monthly/yearly switch (plans then give `price` per period).
yearlyLabel	string	"Yearly"	Label of the yearly option, e.g. `"Yearly −20%"`.

Also accepts every prop of Omit<HTMLAttributes<HTMLElement>, "title">.