Season Pricing

Pricing75: Season Pricing

Three tiers where the featured one is a photograph: it sits on an ink wash under film grain while the others stay on soft panels, each with a serif price, a cadence line, ticked features and its own action.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/pricing75?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/pricing75?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/pricing75.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports pricing75Demo alongside the block: the exact props behind the preview above. Spread it to get a working pricing section in one line.

import { Pricing75, pricing75Demo } from "@/components/beste/block/pricing75";

export default function Page() {
  return <Pricing75 {...pricing75Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Pricing75 } from "@/components/beste/block/pricing75";

export default function Page() {
  return (
    <Pricing75
      eyebrow="Fees"
      heading="Support that fits the season you are in."
      description="Every plan can be paused, and nothing renews without asking."
      tiers={[
        {
          name: "Beginning",
          price: "$60",
          cadence: "One session a month",
          description: "A steady place to check in without a weekly commitment.",
          features: ["One 60-minute session", "A short written note"],
          button: { label: "Start gently", href: "/start", tone: "outline" },
        },
        {
          name: "Rhythm",
          price: "$110",
          cadence: "Two sessions a month",
          description: "The pace most clients settle into.",
          features: ["Two 60-minute sessions", "Priority rescheduling"],
          button: { label: "Find your rhythm", href: "/rhythm", tone: "light" },
          image: { src: "/photos/lake.jpg", alt: "A still mountain lake at dawn" },
        },
      ]}
      labels={{ perMonth: "a month" }}
    />
  );
}

Props

type Tier = {
  name: string;
  price: string;
  cadence: string;
  description: string;
  features: string[];
  button: ActionButton;
  image?: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• There is no featured flag: a tier is featured because it has an image, so the highlight and the photograph can never disagree with each other.
• The featured card is a fixed dark surface, so its muted text is written against background tokens rather than the adaptive ones the light cards use.
• Prices are free strings, not numbers, so "$60", "60 EUR" or "From $60" all render as given with no formatting or currency logic.
• Each card's button carries mt-auto, so the actions line up along the bottom of the row however uneven the feature lists above them are.
• The grid is md:items-stretch, which is what lets that mt-auto have a full-height card to push against.
• The tick marks and the muted text inside a card are chosen from the same featured boolean, so a card is styled from one decision rather than from several.
• The grain filter id comes from useId; note that all featured cards in one instance share it, which is fine since they render the same filter.