Credit Usage Card

Renders a card showing credit usage progress with a percentage bar, labels for used and remaining credits, and a toggle for auto-switching models. It includes a history section and options for managing plans and downloading data.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/credit-usage-card

npx layro-cli add @watermeloncorp/credit-usage-card

npx layro-cli add @watermeloncorp/credit-usage-card

bunx layro-cli add @watermeloncorp/credit-usage-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import {
  MoreVertical,
  Download,
  ChevronDown,
  Check,
  Printer,
  Share2,
  RefreshCw,
} from 'lucide-react';

interface UsageHistoryItem {
  date: string;