Usage Card

Installation

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

"use client";

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

// ... component code

Examples

Basic Usage

Simple usage card with progress bar and itemized list.

Elevated Variant

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

With Usage Meters

Use UsageCardMeter to show individual resource usage with visual progress bars.

Collapsible List

Enable collapsible on UsageCardList to show a preview with expand/collapse functionality.

With Highlighted Items

Use highlighted prop on items to create zebra striping.

With Total Row

Add a UsageCardTotal at the bottom to show the sum of all charges.

Overage Warning

The progress bar turns red when usage exceeds the limit.

Custom Currency

Display amounts in different currencies.

Custom Period Text

Pass custom children to UsageCardPeriod for custom text.

API Reference

UsageCard

The root container component.

UsageCardPeriod

Displays the billing period or days remaining.

UsageCardAction

Action button in the header.

UsageCardLabel

Displays a labeled amount with optional limit.

UsageCardProgress

Progress bar showing usage against a limit.

UsageCardList

Container for usage items with optional collapsing.

UsageCardItem

Individual usage line item.

UsageCardItemValue

Value display for a usage item.

UsageCardMeter

Visual meter showing resource usage with warning states.

UsageCardTotal

Total row at the bottom of the card.

useUsageCardList

Hook to access the list expansion state from child components.

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