Pricing card

TS

import { … } from "@fungi.computer/caps/blocks/pricing-card";

Hero

TSX

import { PricingCard } from "@fungi.computer/caps/blocks/pricing-card";
import { Button } from "@fungi.computer/caps/components/button";

export default function Hero() {
  return (
    <div className="flex flex-wrap gap-sm">
      <PricingCard
        plan={{ name: "Forager", price: "$0", interval: "/mo" }}
        features={
          <ul className="text-sm">
            <li>1 growing log</li>
            <li>Community forum</li>
          </ul>
        }
        action={
          <Button variant="outline" className="w-full">
            Start free
          </Button>
        }
      />
      <PricingCard
        featured
        plan={{ name: "Mycologist", price: "$12", interval: "/mo" }}
        status={<span className="text-xs text-accent">Popular</span>}
        features={
          <ul className="text-sm">
            <li>Unlimited logs</li>
            <li>Spore ID lookup</li>
          </ul>
        }
        action={<Button className="w-full">Upgrade</Button>}
      />
    </div>
  );
}

Banded

TSX

import { PricingCard } from "@fungi.computer/caps/blocks/pricing-card";
import { Button } from "@fungi.computer/caps/components/button";

export default function Banded() {
  return (
    <PricingCard
      layout="banded"
      className="max-w-xs"
      plan={{
        name: "Spore Lab",
        description: "For small-batch cultivators.",
        price: "$29",
        interval: "/mo",
      }}
      art={
        <div className="flex h-20 items-center justify-center text-3xl">🧪</div>
      }
      action={<Button className="w-full">Join the lab</Button>}
    />
  );
}

Props

PricingCardProps

Prop	Type	Description
plan	PricingPlan
features?	ReactNode	Caller-owned feature rows.
action?	ReactNode	Caller-owned action control; this block never invokes or configures it.
status?	ReactNode	Caller-owned status content, such as a badge.
art?	ReactNode	Caller-owned illustration, such as an img with its own alt text.
layout?	"stacked" | "banded"	stacked groups the title and price in the header. banded places the name above the illustration and keeps the price on one line.
featured?	boolean	Marks the one plan a page recommends with a heavier shadow.
density?	CardProps["density"]	Use tighter section spacing for dense plan comparisons.

• planPricingPlan
• features?ReactNode

  Caller-owned feature rows.

• action?ReactNode

  Caller-owned action control; this block never invokes or configures it.

• status?ReactNode

  Caller-owned status content, such as a badge.

• art?ReactNode

  Caller-owned illustration, such as an img with its own alt text.

• layout?"stacked" | "banded"

  stacked groups the title and price in the header. banded places the name above the illustration and keeps the price on one line.

• featured?boolean

  Marks the one plan a page recommends with a heavier shadow.

• density?CardProps["density"]

  Use tighter section spacing for dense plan comparisons.

Full types: API reference.