Animated Usage Card

Installation

npx shadcn@latest add "https://billui.com/r/animated-usage-card.json"

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import { ChevronDown } from "lucide-react";
import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

// ... component code

Examples

Basic Usage

Simple usage card with animated progress bar and itemized list.

With Animated Meters

Use AnimatedUsageCardMeter to show individual resource usage with animated progress bars and number interpolation.

Collapsible List

Enable collapsible on AnimatedUsageCardList to show a preview with bouncy expand/collapse animation.

With Animated Total

The AnimatedUsageCardTotal row animates in with a bounce effect and the amount value interpolates smoothly.

Elevated Variant

Use variant="elevated" to add a shadow for more visual prominence.

API Reference

AnimatedUsageCard

The root container component with entrance animation.

AnimatedUsageCardPeriod

Displays the billing period or days remaining.

AnimatedUsageCardAction

Action button in the header. Extends shadcn Button props.

AnimatedUsageCardLabel

Displays a labeled amount with optional limit.

AnimatedUsageCardProgress

Animated progress bar showing usage against a limit with spring physics.

AnimatedUsageCardList

Container for usage items with optional bouncy expand/collapse animation.

AnimatedUsageCardItem

Individual usage line item.

AnimatedUsageCardItemValue

Value display for a usage item.

AnimatedUsageCardMeter

Visual meter showing resource usage with animated progress and number interpolation.

AnimatedUsageCardTotal

Animated total row with entrance animation and number interpolation.

useAnimatedUsageCardList

Hook to access the list expansion state from child components.

const { 
  expanded, 
  setExpanded, 
  itemCount, 
  collapsedHeight, 
  expandedHeight 
} = useAnimatedUsageCardList();

Comparison with UsageCard

This component is API-compatible with the non-animated UsageCard. You can swap between them by changing the import:

// Without animations
import { UsageCard, UsageCardList, ... } from "@/components/ui/usage-card"

// With animations
import { AnimatedUsageCard, AnimatedUsageCardList, ... } from "@/components/ui/animated-usage-card"

The only API difference is:

• AnimatedUsageCardList uses visibleItems (number of items) instead of collapsedHeight (pixels)