SaaS Pricing Cards Component

Every pricing card listed here is either built with the Cards component by shadcn/ui, with plain TSX and Tailwind CSS, or both.
Besides that, other components of shadcn/ui are also used, and each of them needs a bit of customization.

NOTE: Every component that uses shadcn/ui shall adapt to the project's theme.

1. Inverted Pricing Card

pricing-card.tsx

// shadcn/ui Components
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
} from "@/components/ui/hover-card";

// Icon Library
import { IconCircleCheckFilled, IconInfoCircle } from "@tabler/icons-react";


const FEATURES_LIST = [
    {
        title: "Dedicated Support",
        description: "A named support contact for your organization with SLA-backed response times.",
    },
    {
        title: "ISO 27001 & HIPAA Compliance",
        description: "Enforced compliance policies including Privacy Mode and HIPAA across all users.",
    },
    {
        title: "SSO / SAML",
        description: "Integrate with your identity provider for seamless and secure single sign-on.",
    },
    {
        title: "Advanced Usage Dashboards",
        description: "Track team activity, word usage, and productivity metrics from a central admin panel.",
    },
    {
        title: "Bulk Pricing & IT Admin Seats",
        description: "Volume discounts plus dedicated IT admin seats included at no additional cost.",
    },
];

export default function PricingCard() {


    return (
        <div className=" flex justify-center items-center mt-5 px-5">
            <Card className="pt-0 max-w-xs flex-1">
                <CardHeader className="flex flex-col w-full bg-foreground text-background px-4 py-4 gap-4  rounded-b-xl shadow">
                    <CardTitle className="flex flex-col p-3 w-full bg-muted/20 rounded-lg">
                        <Badge variant={"inverted"}>Starter</Badge>
                        <span className="text-3xl font-bold mt-8">
                            $5.99 <span className="text-sm text-muted">/month</span>
                        </span>
                        <span className="text-muted-foreground text-xs mt-1">billed annually</span>
                    </CardTitle>
                    <CardDescription className="text-sm font-medium">
                        Small amount per month
                    </CardDescription>
                    <CardAction className="w-full">
                        <Button variant={"default"} className="w-full" size={"lg"}>
                            Choose Plan
                        </Button>
                    </CardAction>
                </CardHeader>
                <CardContent>
                    <ul className="space-y-2 text-foreground/80">
                        {FEATURES_LIST.map(item => (
                            <HoverCard key={item.title} openDelay={100} closeDelay={100}>
                                <HoverCardTrigger asChild>
                                    <li
                                        className="flex justify-start items-start gap-2 text-sm group py-1 rounded relative"
                                    >
                                        <IconCircleCheckFilled className="size-4 shrink-0 mt-0.5" /> {item.title}
                                        <IconInfoCircle className="size-4 absolute right-0 top-1.5 text-muted-foreground transition-opacity opacity-0 group-hover:opacity-100" />
                                    </li>
                                </HoverCardTrigger>
                                <HoverCardContent align="end">
                                    {item.description}
                                </HoverCardContent>
                            </HoverCard>
                        ))}
                    </ul>
                </CardContent>
            </Card>
        </div>
    );
};

As the name suggests, this card uses inverted color scheme (i.e, --foreground is used for backgrounds and --background is used for texts) for some part of the component.

Components Used

The following shadcn/ui components are used, and some of them are customized.

Card & Hover Card
The Card and Hover Card by shadcn/ui needs no further customization once added.
Button
Add extra variant to the button component of shadcn/ui to standout from the inverted background.
button.tsx
```
default: "bg-background text-foreground hover:bg-background/80", 
```

Badge
Add this extra variant to the badge component of shadcn/ui.

button.tsx

inverted: "bg-foreground text-background [a]:hover:bg-foreground/80",

For the icons, import relevant icons from the icon library of the project.