AIWalletCard

AI chats

About

The AIWalletCard component is a sleek and professional interface element designed to display and manage a user’s AI credit balance. Built with a minimalist black-and-white aesthetic, it adapts seamlessly to both light and dark themes, offering a clean and distraction-free experience. The component shows essential details such as the current balance, usage progress, and recent transactions, making it perfect for AI-based platforms, subscription dashboards, or credit management systems. Its simple structure, configurable props, and responsive design ensure easy customization while maintaining a modern, utility-first look that aligns well with professional dashboard interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AIWalletCard to your project and fits it to your theme.

Code

How AIWalletCard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { AIWalletCard } from "@/components/ui/aiwallet-card";

export default function AIWalletDemoPage() {
  const [balance, setBalance] = useState(120);
  const [usage, setUsage] = useState(60);

  const handleTopUp = () => {
    setBalance((prev) => prev + 50);
    setUsage((prev) => Math.max(prev - 20, 0));
  };

  return (
    <div className="min-h-screen w-full flex flex-col items-center justify-center bg-gray-50 dark:bg-[#0D1117] p-6 space-y-6 transition-colors">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-white">AI Wallet Card Demo</h1>

      <AIWalletCard
        title="AI Credit Wallet"
        description="Track, manage and top-up your AI credits."
        balance={balance}
        usage={usage}
        currency="$"
        onTopUp={handleTopUp}
        showTransactions={true}
      />
    </div>
  );
}