import { Check, Info } from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

interface PricingCardFeature {
  text: string;
  tooltip?: string;
}

interface PricingCardProps extends React.ComponentProps<"div"> {
  mostPopular?: boolean;
  title: string;
  description?: string;
  icon?: React.ReactNode;
  amount: string;
  billingPeriod: string;
  features?: PricingCardFeature[];
  badge?: React.ReactNode;
  button?: React.ReactNode;
}

function PricingCard1({
  mostPopular = false,
  className,
  title,
  description,
  icon,
  amount,
  billingPeriod,
  features,
  badge,
  button,
  ...props
}: PricingCardProps) {
  const badgeContent = React.useMemo(() => {
    // If badge is explicitly provided, use it (can be null to hide)
    if (badge !== undefined) {
      return badge;
    }
    // Default: show "Most Popular" badge if mostPopular is true
    if (mostPopular) {
      return <Badge>Most Popular</Badge>;
    }
    return null;
  }, [badge, mostPopular]);

  return (
    <div
      data-slot="pricing-card"
      data-most-popular={mostPopular}
      className={cn(
        "group/pricing-card @container/pricing-card relative flex w-full max-w-xl flex-col gap-y-4 rounded-xl border bg-card px-5 py-5 shadow-sm has-data-[slot=pricing-card-badge]:py-11 lg:px-9 lg:py-9 lg:has-data-[slot=pricing-card-badge]:py-12",
        mostPopular && "border-2 border-primary",
        className
      )}
      {...props}
    >
      {/* Header */}
      <div
        data-slot="pricing-card-header"
        className={cn(
          "flex flex-col gap-4",
          "[&_svg:not([class*='size-'])]:size-6 [&_svg:not([class*='text-'])]:text-primary"
        )}
      >
        {/* Badge - wrapped to ensure data-slot and positioning are always applied */}
        {badgeContent && (
          <div data-slot="pricing-card-badge" className="absolute top-3 right-3">
            {badgeContent}
          </div>
        )}

        {icon}

        <div className="flex flex-col gap-2">
          <h3
            data-slot="pricing-card-title"
            className="text-lg font-medium text-foreground"
          >
            {title}
          </h3>
          {description && (
            <p
              data-slot="pricing-card-description"
              className="text-sm font-normal text-muted-foreground"
            >
              {description}
            </p>
          )}
        </div>
      </div>

      {/* Pricing */}
      <div
        data-slot="pricing-card-pricing"
        className="group/pricing-card-pricing flex gap-2"
      >
        <span
          data-slot="pricing-card-amount"
          className={cn(
            "text-6xl font-bold tracking-tight text-foreground tabular-nums",
            "self-end group-[.flex-col]/pricing-card-pricing:self-auto"
          )}
        >
          {amount}
        </span>
        <div
          data-slot="pricing-card-details"
          className={cn(
            "flex flex-col",
            "self-end group-[.flex-col]/pricing-card-pricing:self-auto"
          )}
        >
          <span
            data-slot="pricing-card-billing-period"
            className="text-sm font-medium text-foreground"
          >
            {billingPeriod}
          </span>
          <span className="text-xs font-normal text-muted-foreground">
            Plus local taxes
          </span>
        </div>
      </div>

      {/* Action - only rendered if button is provided */}
      {button && (
        <div data-slot="pricing-card-action" className="[&>button]:w-full">
          {button}
        </div>
      )}

      {/* Features */}
      {features && features.length > 0 && (
        <div data-slot="pricing-card-features" className="flex flex-col gap-3 lg:pt-4">
          {features.map((feature, index) => (
            <div
              key={index}
              className={cn(
                "flex gap-2",
                "[&_svg]:mt-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground"
              )}
            >
              <Check />
              <span className="flex-1 text-sm font-normal text-foreground">
                {feature.text}
              </span>
              {feature.tooltip && (
                <Tooltip>
                  <TooltipTrigger aria-label="More information">
                    <Info className="size-4 text-muted-foreground opacity-70 hover:opacity-100" />
                  </TooltipTrigger>
                  <TooltipContent>{feature.tooltip}</TooltipContent>
                </Tooltip>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export { PricingCard1 };
export type { PricingCardFeature, PricingCardProps };
Pricing Card

Pricing Card 1

Get access to these components and the full library

Built for real interfaces

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

More Components

Real support from the team behind shadcncraft
