Smart PricingNew

When to use

• A pricing section for a finance or B2B product with three tiers
• Pages that want a bright, confident pricing block rather than a quiet table

When not to use

• Dark pages — the lime cards are drawn for a white page
• Plans whose features differ too much to read as three parallel lists

Installation

Add Smart Pricing with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/smart-pricing.json"

Usage

import SmartPricing from "@/components/blocx/SmartPricing";

export default function Page() {
  return <SmartPricing />;
}

API reference

SmartPricing

Takes no props — drop it in as it is.

The plans, prices, features and shapes are the PLANS list at the top of SmartPricing.tsx; yearly is quoted 20% off per month.

Accessibility

• Monthly and Yearly are buttons with aria-pressed, and the switch between them is a real switch
• Each price is announced politely when the billing changes
• The corner shapes are decorative images with empty alt text

Motion

• The cards rise in on a stagger; the switch's knob moves on a spring and every price rolls to its new figure
• Select Plan rolls its label over with an arrow as a deeper green fills it — the cards themselves stay still
• Reduced motion keeps the swaps and drops the movement

Responsive behavior

• Three across on desktop, sharing the row below 1240px
• A single centred column below 900px, with the headline allowed to wrap