1 variant

Pricing Card

Name: easeUI Pro
Price: 99.00 USD

A plan card with a price, what you get, and one call to action, plus a featured treatment that costs no extra height.

MonthlyYearly2 months free

Team

Best value

per seat / month

Every Pro component and block, for the whole team.

All Pro components
All Blocks
The Console template
Priority support

usage.tsx

import { PricingCard } from "@/components/registry/pricing-card";

export function Plans() {
  return (
    <PricingCard
      featured
      badge="Best value"
      name="Lifetime"
      price="$159"
      period="per seat, once"
      features={["All Pro components", "New blocks, forever"]}
      action={<Button>Choose Lifetime</Button>}
    />
  );
}

"use client";

import { Check } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

/** Rolls only the characters that changed. Slots key by distance from the right edge, so the currency mark stays put. */
function RollingPrice({ value }: { value: string }) {
  const reduce = useReducedMotion();
  const characters = value.split("");

105 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/pricing-card