Pricing Cards - hextastudio/ui

hextastudio/ui needs your support to stay running 🫶 Help us

Preview

Basic

$199

5GB Storage
Unlimited Public Repositories
Community Support
Access to Basic Tutorials
Email Support

Premium ++

$799

Unlimited Storage
Unlimited Private Repositories
24/7 Support
One-click Deploy
Free Domain
Access to All Tutorials
Priority Email Support
Live Chat Support
Dedicated Account Manager

Premium

$399

50GB Storage
Unlimited Private Repositories
Dedicated Support
Access to Premium Tutorials
Priority Email Support
Live Chat Support

Complete Code

bash

npx hexta-ui add button badge

tsx

import { Button } from "@/components/hexta-ui/Button";
import { Badge } from "@/components/hexta-ui/Badge";

PricingCard.tsx

interface PricingCardProps {
  items: PricingItem[];
  price: string;
  title: string;
  popular?: boolean;
}

export interface PricingItem {
  features: string[];
}

Usage

tsx

<div className="flex flex-row flex-wrap min-h-[30rem] p-2 items-end">
    <PricingCard
        title="Basic"
        price="$199"
        items={[
        {
            features: [
            "5GB Storage",
            "Unlimited Public Repositories",
            "Community Support",