1 variant

Pricing Card

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 actually changed, like an odometer. Slots are
 * keyed by distance from the right edge, so going from "$99" to "$249" moves
 * the digits and leaves the currency mark where it is instead of rerolling the

112 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Props

nameRequiredstring

The plan's name.

priceRequiredstring

Already formatted, such as $99 or Free. Change it and only the characters that differ roll to the new value.

periodstring

What the price is per, such as per seat / year.

descriptionstring

One line under the price.

featuresRequiredstring[]

One check mark each.

badgestring

Short pill in the header, such as Best value.

featuredbooleanDefault false

Rings the card in the accent. Same shadow shape either way, so a featured card is never a pixel taller than a plain one.

actionReactNode

The call to action. The card only gives it the full width.

classNamestring

Merged last, so anything passed here wins over the component's own classes.