# Introduction



billui is an open collection of billing components for React, built on top of shadcn/ui and distributed via the shadcn registry. The goal is simple: **help you ship billing UI faster**.

This is my small contribution to the open source community that taught me so much. {'<3'}

## Not a library—an open component distribution

Like shadcn/ui, billui is not a typical install-from-NPM library. It's an open collection you can copy, modify, and customize directly in your codebase. You own the code. No wrappers, no overrides, no fighting with the library.

Billing UI is deceptively complex. Pricing tables, plan groups, invoice history—each one has edge cases and design decisions that take time to get right. billui gives you battle-tested starting points so you can focus on what makes your product unique.

## Why billui?

* **Open source & copy-first**: Direct access to source so you can adapt components to your design system
* **Ship faster**: Stop rebuilding the same billing components from scratch
* **shadcn compatible**: Install via the shadcn CLI, works with your existing setup
* **Composable**: Build complex billing UIs from simple, reusable primitives
* **Accessible**: Built with semantic HTML and accessibility in mind
* **Type-safe**: Full TypeScript support with exported types


# Animated Usage Card



import {
  AnimatedUsageCard,
  AnimatedUsageCardHeader,
  AnimatedUsageCardPeriod,
  AnimatedUsageCardAction,
  AnimatedUsageCardSummary,
  AnimatedUsageCardLabels,
  AnimatedUsageCardLabel,
  AnimatedUsageCardProgress,
  AnimatedUsageCardList,
  AnimatedUsageCardItem,
  AnimatedUsageCardItemLabel,
  AnimatedUsageCardItemValue,
  AnimatedUsageCardMeter,
  AnimatedUsageCardTotal,
} from "@/registry/animated";

<ComponentPreview
  component="animated-usage-card"
  example="preview"
  animated
  code={`<AnimatedUsageCard>
<AnimatedUsageCardHeader>
  <AnimatedUsageCardPeriod daysRemaining={12} />
  <AnimatedUsageCardAction>Buy Credits</AnimatedUsageCardAction>
</AnimatedUsageCardHeader>
<AnimatedUsageCardSummary>
  <AnimatedUsageCardLabels>
    <AnimatedUsageCardLabel label="Credits Used" amount={347} limit={500} currency="" />
    <AnimatedUsageCardLabel label="Remaining" amount={153} currency="" align="right" />
  </AnimatedUsageCardLabels>
  <AnimatedUsageCardProgress value={347} max={500} />
</AnimatedUsageCardSummary>
<AnimatedUsageCardList collapsible>
  <AnimatedUsageCardItem highlighted>
    <AnimatedUsageCardItemLabel>Image Generation</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue>120 credits</AnimatedUsageCardItemValue>
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Video Generation</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue>85 credits</AnimatedUsageCardItemValue>
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem highlighted>
    <AnimatedUsageCardItemLabel>Upscaling (4x)</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue>62 credits</AnimatedUsageCardItemValue>
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Background Removal</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue>45 credits</AnimatedUsageCardItemValue>
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem highlighted>
    <AnimatedUsageCardItemLabel>Style Transfer</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue>35 credits</AnimatedUsageCardItemValue>
  </AnimatedUsageCardItem>
</AnimatedUsageCardList>
</AnimatedUsageCard>`}
>
  <div className="w-full max-w-xl">
    <AnimatedUsageCard>
      <AnimatedUsageCardHeader>
        <AnimatedUsageCardPeriod daysRemaining={12} />

        <AnimatedUsageCardAction>
          Buy Credits
        </AnimatedUsageCardAction>
      </AnimatedUsageCardHeader>

      <AnimatedUsageCardSummary>
        <AnimatedUsageCardLabels>
          <AnimatedUsageCardLabel label="Credits Used" amount={347} limit={500} currency="" />

          <AnimatedUsageCardLabel label="Remaining" amount={153} currency="" align="right" />
        </AnimatedUsageCardLabels>

        <AnimatedUsageCardProgress value={347} max={500} />
      </AnimatedUsageCardSummary>

      <AnimatedUsageCardList collapsible>
        <AnimatedUsageCardItem highlighted>
          <AnimatedUsageCardItemLabel>
            Image Generation
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue>
            120 credits
          </AnimatedUsageCardItemValue>
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Video Generation
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue>
            85 credits
          </AnimatedUsageCardItemValue>
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem highlighted>
          <AnimatedUsageCardItemLabel>
            Upscaling (4x)
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue>
            62 credits
          </AnimatedUsageCardItemValue>
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Background Removal
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue>
            45 credits
          </AnimatedUsageCardItemValue>
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem highlighted>
          <AnimatedUsageCardItemLabel>
            Style Transfer
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue>
            35 credits
          </AnimatedUsageCardItemValue>
        </AnimatedUsageCardItem>
      </AnimatedUsageCardList>
    </AnimatedUsageCard>
  </div>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/animated-usage-card.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/animated-usage-card.tsx"
    "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
    ```
  </Tab>
</Tabs>

## Examples

### Basic Usage

Simple usage card with animated progress bar and itemized list.

<ComponentPreview
  component="animated-usage-card"
  example="basic"
  animated
  code={`<AnimatedUsageCard>
<AnimatedUsageCardHeader>
  <AnimatedUsageCardPeriod daysRemaining={14} />
</AnimatedUsageCardHeader>
<AnimatedUsageCardSummary>
  <AnimatedUsageCardLabels>
    <AnimatedUsageCardLabel label="Used" amount={12.50} limit={20} />
  </AnimatedUsageCardLabels>
  <AnimatedUsageCardProgress value={12.50} max={20} />
</AnimatedUsageCardSummary>
<AnimatedUsageCardList>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>API Calls</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={8.50} />
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Storage</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={4.00} />
  </AnimatedUsageCardItem>
</AnimatedUsageCardList>
</AnimatedUsageCard>`}
>
  <div className="w-full max-w-md">
    <AnimatedUsageCard>
      <AnimatedUsageCardHeader>
        <AnimatedUsageCardPeriod daysRemaining={14} />
      </AnimatedUsageCardHeader>

      <AnimatedUsageCardSummary>
        <AnimatedUsageCardLabels>
          <AnimatedUsageCardLabel label="Used" amount={12.50} limit={20} />
        </AnimatedUsageCardLabels>

        <AnimatedUsageCardProgress value={12.50} max={20} />
      </AnimatedUsageCardSummary>

      <AnimatedUsageCardList>
        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            API Calls
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={8.50} />
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Storage
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={4.00} />
        </AnimatedUsageCardItem>
      </AnimatedUsageCardList>
    </AnimatedUsageCard>
  </div>
</ComponentPreview>

### With Animated Meters

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

<ComponentPreview
  component="animated-usage-card"
  example="meters"
  animated
  code={`<AnimatedUsageCard>
<AnimatedUsageCardHeader>
  <AnimatedUsageCardPeriod daysRemaining={5} />
  <AnimatedUsageCardAction>Manage</AnimatedUsageCardAction>
</AnimatedUsageCardHeader>
<div className="divide-y divide-border">
  <AnimatedUsageCardMeter used={8500} limit={10000} label="API Requests" unit="req" showPercentage />
  <AnimatedUsageCardMeter used={4.2} limit={5} label="Storage" unit="GB" showPercentage />
  <AnimatedUsageCardMeter used={950} limit={1000} label="Bandwidth" unit="GB" showPercentage />
</div>
</AnimatedUsageCard>`}
>
  <div className="w-full max-w-md">
    <AnimatedUsageCard>
      <AnimatedUsageCardHeader>
        <AnimatedUsageCardPeriod daysRemaining={5} />

        <AnimatedUsageCardAction>
          Manage
        </AnimatedUsageCardAction>
      </AnimatedUsageCardHeader>

      <div className="divide-y divide-border">
        <AnimatedUsageCardMeter used={8500} limit={10000} label="API Requests" unit="req" showPercentage />

        <AnimatedUsageCardMeter used={4.2} limit={5} label="Storage" unit="GB" showPercentage />

        <AnimatedUsageCardMeter used={950} limit={1000} label="Bandwidth" unit="GB" showPercentage />
      </div>
    </AnimatedUsageCard>
  </div>
</ComponentPreview>

### Collapsible List

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

<ComponentPreview
  component="animated-usage-card"
  example="collapsible"
  animated
  code={`<AnimatedUsageCard>
<AnimatedUsageCardHeader>
  <AnimatedUsageCardPeriod daysRemaining={3} />
</AnimatedUsageCardHeader>
<AnimatedUsageCardList collapsible visibleItems={1.5}>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Build Minutes</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={4.02} />
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Edge Invocations</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={0.65} />
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Function Calls</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={0.60} />
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Bandwidth</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={0.34} />
  </AnimatedUsageCardItem>
</AnimatedUsageCardList>
</AnimatedUsageCard>`}
>
  <div className="w-full max-w-md">
    <AnimatedUsageCard>
      <AnimatedUsageCardHeader>
        <AnimatedUsageCardPeriod daysRemaining={3} />
      </AnimatedUsageCardHeader>

      <AnimatedUsageCardList collapsible visibleItems={1.5}>
        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Build Minutes
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={4.02} />
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Edge Invocations
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={0.65} />
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Function Calls
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={0.60} />
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Bandwidth
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={0.34} />
        </AnimatedUsageCardItem>
      </AnimatedUsageCardList>
    </AnimatedUsageCard>
  </div>
</ComponentPreview>

### With Animated Total

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

<ComponentPreview
  component="animated-usage-card"
  example="total"
  animated
  code={`<AnimatedUsageCard>
<AnimatedUsageCardHeader>
  <AnimatedUsageCardPeriod daysRemaining={2} />
</AnimatedUsageCardHeader>
<AnimatedUsageCardList>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Pro Plan</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={29.00} />
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Extra Seats (3)</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={45.00} />
  </AnimatedUsageCardItem>
  <AnimatedUsageCardItem>
    <AnimatedUsageCardItemLabel>Storage Add-on</AnimatedUsageCardItemLabel>
    <AnimatedUsageCardItemValue amount={10.00} />
  </AnimatedUsageCardItem>
</AnimatedUsageCardList>
<AnimatedUsageCardTotal amount={84.00} />
</AnimatedUsageCard>`}
>
  <div className="w-full max-w-md">
    <AnimatedUsageCard>
      <AnimatedUsageCardHeader>
        <AnimatedUsageCardPeriod daysRemaining={2} />
      </AnimatedUsageCardHeader>

      <AnimatedUsageCardList>
        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Pro Plan
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={29.00} />
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Extra Seats (3)
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={45.00} />
        </AnimatedUsageCardItem>

        <AnimatedUsageCardItem>
          <AnimatedUsageCardItemLabel>
            Storage Add-on
          </AnimatedUsageCardItemLabel>

          <AnimatedUsageCardItemValue amount={10.00} />
        </AnimatedUsageCardItem>
      </AnimatedUsageCardList>

      <AnimatedUsageCardTotal amount={84.00} />
    </AnimatedUsageCard>
  </div>
</ComponentPreview>

### Elevated Variant

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

<ComponentPreview
  component="animated-usage-card"
  example="elevated"
  code={`<AnimatedUsageCard variant="elevated">
<AnimatedUsageCardHeader>
  <AnimatedUsageCardPeriod daysRemaining={7} />
  <AnimatedUsageCardAction>Upgrade</AnimatedUsageCardAction>
</AnimatedUsageCardHeader>
<AnimatedUsageCardSummary>
  <AnimatedUsageCardLabels>
    <AnimatedUsageCardLabel label="Credits Used" amount={18.50} limit={20} />
    <AnimatedUsageCardLabel label="On-Demand" amount={0} align="right" />
  </AnimatedUsageCardLabels>
  <AnimatedUsageCardProgress value={18.50} max={20} />
</AnimatedUsageCardSummary>
</AnimatedUsageCard>`}
>
  <div className="w-full max-w-md">
    <AnimatedUsageCard variant="elevated">
      <AnimatedUsageCardHeader>
        <AnimatedUsageCardPeriod daysRemaining={7} />

        <AnimatedUsageCardAction>
          Upgrade
        </AnimatedUsageCardAction>
      </AnimatedUsageCardHeader>

      <AnimatedUsageCardSummary>
        <AnimatedUsageCardLabels>
          <AnimatedUsageCardLabel label="Credits Used" amount={18.50} limit={20} />

          <AnimatedUsageCardLabel label="On-Demand" amount={0} align="right" />
        </AnimatedUsageCardLabels>

        <AnimatedUsageCardProgress value={18.50} max={20} />
      </AnimatedUsageCardSummary>
    </AnimatedUsageCard>
  </div>
</ComponentPreview>

## API Reference

### AnimatedUsageCard

The root container component with entrance animation.

| Prop      | Type                      | Default     |
| --------- | ------------------------- | ----------- |
| `variant` | `"default" \| "elevated"` | `"default"` |

### AnimatedUsageCardPeriod

Displays the billing period or days remaining.

| Prop            | Type     | Default |
| --------------- | -------- | ------- |
| `daysRemaining` | `number` | —       |

### AnimatedUsageCardAction

Action button in the header. Extends shadcn Button props.

| Prop      | Type                                | Default     |
| --------- | ----------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "ghost"` | `"outline"` |

### AnimatedUsageCardLabel

Displays a labeled amount with optional limit.

| Prop       | Type                | Default  |
| ---------- | ------------------- | -------- |
| `label`    | `string`            | —        |
| `amount`   | `number`            | —        |
| `limit`    | `number`            | —        |
| `currency` | `string`            | `"$"`    |
| `align`    | `"left" \| "right"` | `"left"` |

### AnimatedUsageCardProgress

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

| Prop          | Type      | Default |
| ------------- | --------- | ------- |
| `value`       | `number`  | —       |
| `max`         | `number`  | `100`   |
| `showOverage` | `boolean` | `false` |

### AnimatedUsageCardList

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

| Prop              | Type      | Default |
| ----------------- | --------- | ------- |
| `collapsible`     | `boolean` | `false` |
| `defaultExpanded` | `boolean` | `false` |
| `visibleItems`    | `number`  | `1.5`   |
| `dividers`        | `boolean` | `true`  |

### AnimatedUsageCardItem

Individual usage line item.

| Prop          | Type      | Default |
| ------------- | --------- | ------- |
| `highlighted` | `boolean` | `false` |

### AnimatedUsageCardItemValue

Value display for a usage item.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `amount`   | `number` | —       |
| `currency` | `string` | `"$"`   |
| `unit`     | `string` | —       |

### AnimatedUsageCardMeter

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

| Prop             | Type      | Default |
| ---------------- | --------- | ------- |
| `used`           | `number`  | —       |
| `limit`          | `number`  | —       |
| `label`          | `string`  | —       |
| `unit`           | `string`  | —       |
| `showPercentage` | `boolean` | `false` |

### AnimatedUsageCardTotal

Animated total row with entrance animation and number interpolation.

| Prop       | Type     | Default   |
| ---------- | -------- | --------- |
| `label`    | `string` | `"Total"` |
| `amount`   | `number` | —         |
| `currency` | `string` | `"$"`     |

### useAnimatedUsageCardList

Hook to access the list expansion state from child components.

```tsx
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:

```tsx
// 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)


# Billing Address



import { Label } from "@/components/ui/label";
import {
  BillingAddress,
  BillingAddressInput,
  BillingAddressCountry,
  BillingAddressState,
} from "@/registry/ui";

<ComponentPreview
  component="billing-address"
  example="preview"
  code={`<div className="w-full max-w-md">
    <BillingAddress defaultCountry="US">
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="name">Full Name</Label>
        <BillingAddressInput id="name" name="name" field="name" placeholder="Name" />
      </div>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="country">Country</Label>
        <BillingAddressCountry id="country" name="country" />
      </div>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="line1">Address</Label>
        <BillingAddressInput id="line1" name="line1" field="line1" placeholder="Street address" />
      </div>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="line2">Apartment, suite, etc.</Label>
        <BillingAddressInput id="line2" name="line2" field="line2" placeholder="Apt, suite, etc. (optional)" />
      </div>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="city">City</Label>
        <BillingAddressInput id="city" name="city" field="city" placeholder="City" />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="state">State</Label>
          <BillingAddressState id="state" name="state" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="postal">ZIP Code</Label>
          <BillingAddressInput id="postal" name="postal" field="postalCode" placeholder="ZIP code" />
        </div>
      </div>
    </BillingAddress>
  </div>`}
>
  <div className="w-full max-w-md">
    <BillingAddress defaultCountry="US">
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="name">
          Full Name
        </Label>

        <BillingAddressInput id="name" name="name" field="name" placeholder="Name" />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="country">
          Country
        </Label>

        <BillingAddressCountry id="country" name="country" />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="line1">
          Address
        </Label>

        <BillingAddressInput id="line1" name="line1" field="line1" placeholder="Street address" />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="line2">
          Apartment, suite, etc.
        </Label>

        <BillingAddressInput id="line2" name="line2" field="line2" placeholder="Apt, suite, etc. (optional)" />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="city">
          City
        </Label>

        <BillingAddressInput id="city" name="city" field="city" placeholder="City" />
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="state">
            State
          </Label>

          <BillingAddressState id="state" name="state" />
        </div>

        <div className="flex flex-col gap-1.5">
          <Label htmlFor="postal">
            ZIP Code
          </Label>

          <BillingAddressInput id="postal" name="postal" field="postalCode" placeholder="ZIP code" />
        </div>
      </div>
    </BillingAddress>
  </div>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/billing-address.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/billing-address.tsx"
    "use client";

    import * as React from "react";
    import { Input } from "@/components/ui/input";
    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
    import { cn } from "@/lib/utils";
    import { COUNTRIES, getStatesForCountry, type IState } from "./billing-address-data";

    // ... component code
    ```
  </Tab>
</Tabs>

## Examples

### Minimal Form

A compact version with only essential fields.

<ComponentPreview
  component="billing-address"
  example="basic"
  code={`<div className="w-full max-w-md">
    <BillingAddress defaultCountry="US">
      <BillingAddressCountry name="country" />
      <BillingAddressInput field="line1" name="line1" placeholder="Street address" />
      <div className="grid grid-cols-2 gap-3">
        <BillingAddressInput field="city" name="city" placeholder="City" />
        <BillingAddressState name="state" />
      </div>
      <BillingAddressInput field="postalCode" name="postal" placeholder="ZIP code" />
    </BillingAddress>
  </div>`}
>
  <div className="w-full max-w-md">
    <BillingAddress defaultCountry="US">
      <BillingAddressCountry name="country" />

      <BillingAddressInput field="line1" name="line1" placeholder="Street address" />

      <div className="grid grid-cols-2 gap-3">
        <BillingAddressInput field="city" name="city" placeholder="City" />

        <BillingAddressState name="state" />
      </div>

      <BillingAddressInput field="postalCode" name="postal" placeholder="ZIP code" />
    </BillingAddress>
  </div>
</ComponentPreview>

### With Server Actions

The `name` prop enables native form submission—works with `useActionState` and Server Actions.

```tsx title="billing-form.tsx"
"use client";

import { useActionState } from "react";

function BillingForm() {
  const [state, formAction] = useActionState(updateBilling, null);
  
  return (
    <form action={formAction}>
      <BillingAddress>
        <BillingAddressCountry name="country" />
        <BillingAddressInput field="line1" name="line1" placeholder="Address" />
        <BillingAddressInput field="city" name="city" placeholder="City" />
        <BillingAddressState name="state" />
        <BillingAddressInput field="postalCode" name="postal" placeholder="ZIP" />
      </BillingAddress>
      <button type="submit">Save</button>
    </form>
  );
}
```

### Controlled State

For real-time validation or conditional UI.

```tsx
function ControlledBillingForm() {
  const [country, setCountry] = useState("US");
  const [state, setState] = useState("");
  
  const showTaxMessage = state === "CA";
  
  return (
    <BillingAddress country={country} onCountryChange={setCountry}>
      <BillingAddressCountry />
      <BillingAddressState value={state} onValueChange={setState} />
      {showTaxMessage && <p>California sales tax applies</p>}
    </BillingAddress>
  );
}
```

## API Reference

### BillingAddress

Root component that provides country/state synchronization context.

| Prop              | Type                     | Default |
| ----------------- | ------------------------ | ------- |
| `defaultCountry`  | `string`                 | `"US"`  |
| `country`         | `string`                 | —       |
| `onCountryChange` | `(code: string) => void` | —       |

### BillingAddressInput

Input with correct `autocomplete`, `inputMode`, and `spellCheck` based on field type.

| Prop            | Type                                                     | Default |
| --------------- | -------------------------------------------------------- | ------- |
| `field`         | `"name" \| "line1" \| "line2" \| "city" \| "postalCode"` | —       |
| `name`          | `string`                                                 | —       |
| `value`         | `string`                                                 | —       |
| `defaultValue`  | `string`                                                 | `""`    |
| `onValueChange` | `(value: string) => void`                                | —       |
| `trimOnBlur`    | `boolean`                                                | `true`  |

### BillingAddressCountry

Select with all countries. Syncs with root context.

| Prop            | Type                      | Default             |
| --------------- | ------------------------- | ------------------- |
| `name`          | `string`                  | —                   |
| `onValueChange` | `(value: string) => void` | —                   |
| `placeholder`   | `string`                  | `"Select country…"` |
| `disabled`      | `boolean`                 | `false`             |

### BillingAddressState

Select when states exist for the country, Input otherwise. Resets when country changes.

| Prop            | Type                      | Default               |
| --------------- | ------------------------- | --------------------- |
| `name`          | `string`                  | —                     |
| `value`         | `string`                  | —                     |
| `defaultValue`  | `string`                  | `""`                  |
| `onValueChange` | `(value: string) => void` | —                     |
| `placeholder`   | `string`                  | `"State / Province…"` |
| `trimOnBlur`    | `boolean`                 | `true`                |
| `disabled`      | `boolean`                 | `false`               |


# Card Input



import {
  CardInputGroup,
  CardNumberInput,
  CardExpiryInput,
  CardCvcInput,
} from "@/registry/ui";

<ComponentPreview
  component="card-input"
  example="preview"
  code={`<div className="w-full max-w-md">
    <CardInputGroup>
      <CardNumberInput />
      <CardExpiryInput />
      <CardCvcInput />
    </CardInputGroup>
  </div>`}
>
  <div className="w-full max-w-md">
    <CardInputGroup>
      <CardNumberInput />

      <CardExpiryInput />

      <CardCvcInput />
    </CardInputGroup>
  </div>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/card-input.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/card-input.tsx"
    "use client";

    import * as React from "react";
    import { cn } from "@/lib/utils";
    import { CardBrandIcons, type CardBrand } from "./card-icons";

    // ... component code
    ```
  </Tab>
</Tabs>

## Examples

### Basic Grouped Inputs

Use `CardInputGroup` to combine all card inputs into a single grouped component with shared focus states.

<ComponentPreview
  component="card-input"
  example="basic"
  code={`<div className="w-full max-w-md">
    <CardInputGroup>
      <CardNumberInput />
      <CardExpiryInput />
      <CardCvcInput />
    </CardInputGroup>
  </div>`}
>
  <div className="w-full max-w-md">
    <CardInputGroup>
      <CardNumberInput />

      <CardExpiryInput />

      <CardCvcInput />
    </CardInputGroup>
  </div>
</ComponentPreview>

### Individual Inputs

Use each input component separately for custom layouts with individual labels and styling.

<ComponentPreview
  component="card-input"
  example="individual"
  code={`<div className="w-full max-w-lg space-y-4">
    <div>
      <label className="mb-2 block text-sm font-medium">Card Number</label>
      <div className="rounded-lg border bg-background px-3">
        <CardNumberInput />
      </div>
    </div>
    <div className="grid grid-cols-2 gap-4">
      <div>
        <label className="mb-2 block text-sm font-medium">Expiration Date</label>
        <div className="rounded-lg border bg-background px-3">
          <CardExpiryInput />
        </div>
      </div>
      <div>
        <label className="mb-2 block text-sm font-medium">Security Code</label>
        <div className="rounded-lg border bg-background px-3">
          <CardCvcInput />
        </div>
      </div>
    </div>
  </div>`}
>
  <div className="w-full max-w-lg space-y-4">
    <div>
      <label className="mb-2 block text-sm font-medium">
        Card Number
      </label>

      <div className="rounded-lg border bg-background px-3">
        <CardNumberInput />
      </div>
    </div>

    <div className="grid grid-cols-2 gap-4">
      <div>
        <label className="mb-2 block text-sm font-medium">
          Expiration Date
        </label>

        <div className="rounded-lg border bg-background px-3">
          <CardExpiryInput />
        </div>
      </div>

      <div>
        <label className="mb-2 block text-sm font-medium">
          Security Code
        </label>

        <div className="rounded-lg border bg-background px-3">
          <CardCvcInput />
        </div>
      </div>
    </div>
  </div>
</ComponentPreview>

## API Reference

### CardInputGroup

Container that groups card inputs together with shared focus states and border styling.

| Prop    | Type      | Default |
| ------- | --------- | ------- |
| `error` | `boolean` | `false` |

### CardNumberInput

Card number input with automatic formatting, brand detection, and Luhn validation.

| Prop                 | Type                                                              | Default |
| -------------------- | ----------------------------------------------------------------- | ------- |
| `value`              | `string`                                                          | —       |
| `defaultValue`       | `string`                                                          | `""`    |
| `onValueChange`      | `(value: string) => void`                                         | —       |
| `onBrandChange`      | `(brand: CardBrand) => void`                                      | —       |
| `onValidationChange` | `(validation: { isValid: boolean; isComplete: boolean }) => void` | —       |
| `disabled`           | `boolean`                                                         | `false` |

### CardExpiryInput

Expiry date input with MM/YY formatting and expiration validation.

| Prop                 | Type                                                                                  | Default |
| -------------------- | ------------------------------------------------------------------------------------- | ------- |
| `value`              | `string`                                                                              | —       |
| `defaultValue`       | `string`                                                                              | `""`    |
| `onValueChange`      | `(value: string) => void`                                                             | —       |
| `onValidationChange` | `(validation: { isValid: boolean; isComplete: boolean; isExpired: boolean }) => void` | —       |
| `disabled`           | `boolean`                                                                             | `false` |

### CardCvcInput

CVC/CVV input that adapts to card brand (3 digits for most cards, 4 for Amex). When used inside `CardInputGroup`, automatically gets the brand from context.

| Prop            | Type                      | Default |
| --------------- | ------------------------- | ------- |
| `value`         | `string`                  | —       |
| `defaultValue`  | `string`                  | `""`    |
| `onValueChange` | `(value: string) => void` | —       |
| `disabled`      | `boolean`                 | `false` |

### CardBrand

Type representing supported card brands.

```tsx
type CardBrand =
  | "visa"
  | "mastercard"
  | "amex"
  | "discover"
  | "diners"
  | "jcb"
  | "unionpay"
  | "unknown";
```


# Components



<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 not-prose my-6">
  <a href="/docs/components/billing-address" className="text-sm font-medium hover:underline underline-offset-4">
    Billing Address
  </a>

  <a href="/docs/components/card-input" className="text-sm font-medium hover:underline underline-offset-4">
    Card Input
  </a>

  <a href="/docs/components/invoice-card" className="text-sm font-medium hover:underline underline-offset-4">
    Invoice Card
  </a>

  <a href="/docs/components/payment-method" className="text-sm font-medium hover:underline underline-offset-4">
    Payment Method
  </a>

  <a href="/docs/components/plan-card" className="text-sm font-medium hover:underline underline-offset-4">
    Plan Card
  </a>

  <a href="/docs/components/plan-group" className="text-sm font-medium hover:underline underline-offset-4">
    Plan Group
  </a>

  <a href="/docs/components/pricing-table" className="text-sm font-medium hover:underline underline-offset-4">
    Pricing Table
  </a>

  <a href="/docs/components/usage-card" className="text-sm font-medium hover:underline underline-offset-4">
    Usage Card
  </a>

  <a href="/docs/animated/animated-usage-card" className="text-sm font-medium hover:underline underline-offset-4">
    Animated Usage Card
  </a>
</div>

***

Can't find what you need? Check our [GitHub repository](https://github.com/commet-labs/billui) and open an issue to request a new component.


# Invoice Card



import {
  InvoiceCard,
  InvoiceCardIcon,
  InvoiceCardContent,
  InvoiceCardHeader,
  InvoiceCardNumber,
  InvoiceCardStatus,
  InvoiceCardDate,
  InvoiceCardAmount,
  InvoiceCardActions,
  InvoiceCardAction,
} from "@/registry/ui";

<ComponentPreview
  component="invoice-card"
  example="preview"
  code={`<div className="w-full max-w-lg space-y-3">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-001</InvoiceCardNumber>
          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} />
      <InvoiceCardActions>
        <InvoiceCardAction action="download" />
      </InvoiceCardActions>
    </InvoiceCard>

    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-002</InvoiceCardNumber>
          <InvoiceCardStatus status="pending" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-02-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} />
      <InvoiceCardActions>
        <InvoiceCardAction action="view" />
      </InvoiceCardActions>
    </InvoiceCard>

    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-003</InvoiceCardNumber>
          <InvoiceCardStatus status="failed" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-03-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={49} />
      <InvoiceCardActions>
        <InvoiceCardAction action="view" />
      </InvoiceCardActions>
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg space-y-3">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-001
          </InvoiceCardNumber>

          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} />

      <InvoiceCardActions>
        <InvoiceCardAction action="download" />
      </InvoiceCardActions>
    </InvoiceCard>

    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-002
          </InvoiceCardNumber>

          <InvoiceCardStatus status="pending" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-02-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} />

      <InvoiceCardActions>
        <InvoiceCardAction action="view" />
      </InvoiceCardActions>
    </InvoiceCard>

    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-003
          </InvoiceCardNumber>

          <InvoiceCardStatus status="failed" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-03-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={49} />

      <InvoiceCardActions>
        <InvoiceCardAction action="view" />
      </InvoiceCardActions>
    </InvoiceCard>
  </div>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/invoice-card.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/invoice-card.tsx"
    import { cva, type VariantProps } from "class-variance-authority";
    import { Download, ExternalLink, FileText } from "lucide-react";
    import * as React from "react";
    import { cn } from "@/lib/utils";
    import { Badge } from "@/components/ui/badge";
    import { Button } from "@/components/ui/button";

    const invoiceCardVariants = cva(
      "relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors hover:bg-accent/50",
      {
        variants: {
          variant: {
            default: "border-border",
            compact: "gap-3 p-3",
          },
        },
        defaultVariants: {
          variant: "default",
        },
      },
    );

    interface InvoiceCardProps
      extends React.HTMLAttributes<HTMLDivElement>,
        VariantProps<typeof invoiceCardVariants> {}

    const InvoiceCard = React.forwardRef<HTMLDivElement, InvoiceCardProps>(
      ({ className, variant, ...props }, ref) => (
        <div
          ref={ref}
          className={cn(invoiceCardVariants({ variant, className }))}
          {...props}
        />
      ),
    );
    InvoiceCard.displayName = "InvoiceCard";

    // ... rest of component code
    ```
  </Tab>
</Tabs>

## Examples

### Pending Status

<ComponentPreview
  component="invoice-card"
  example="pending"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-002</InvoiceCardNumber>
          <InvoiceCardStatus status="pending" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-02-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={49} />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-002
          </InvoiceCardNumber>

          <InvoiceCardStatus status="pending" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-02-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={49} />
    </InvoiceCard>
  </div>
</ComponentPreview>

### Failed Status

<ComponentPreview
  component="invoice-card"
  example="failed"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-003</InvoiceCardNumber>
          <InvoiceCardStatus status="failed" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-03-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={99} />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-003
          </InvoiceCardNumber>

          <InvoiceCardStatus status="failed" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-03-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={99} />
    </InvoiceCard>
  </div>
</ComponentPreview>

### Refunded Status

<ComponentPreview
  component="invoice-card"
  example="refunded"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-004</InvoiceCardNumber>
          <InvoiceCardStatus status="refunded" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-04-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-004
          </InvoiceCardNumber>

          <InvoiceCardStatus status="refunded" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-04-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} />
    </InvoiceCard>
  </div>
</ComponentPreview>

### Draft Status

<ComponentPreview
  component="invoice-card"
  example="draft"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-005</InvoiceCardNumber>
          <InvoiceCardStatus status="draft" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-05-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={149} />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-005
          </InvoiceCardNumber>

          <InvoiceCardStatus status="draft" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-05-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={149} />
    </InvoiceCard>
  </div>
</ComponentPreview>

### Compact Variant

Use the `compact` variant for denser layouts.

<ComponentPreview
  component="invoice-card"
  example="compact"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard variant="compact">
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-001</InvoiceCardNumber>
          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard variant="compact">
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-001
          </InvoiceCardNumber>

          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} />
    </InvoiceCard>
  </div>
</ComponentPreview>

### Long Date Format

Use the `format="long"` prop for more detailed date display.

<ComponentPreview
  component="invoice-card"
  example="long-date"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-001</InvoiceCardNumber>
          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-01-15" format="long" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-001
          </InvoiceCardNumber>

          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-01-15" format="long" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} />
    </InvoiceCard>
  </div>
</ComponentPreview>

### With Actions

Include download or view action buttons.

<ComponentPreview
  component="invoice-card"
  example="actions"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-001</InvoiceCardNumber>
          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} />
      <InvoiceCardActions>
        <InvoiceCardAction action="download" />
        <InvoiceCardAction action="view" />
      </InvoiceCardActions>
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-001
          </InvoiceCardNumber>

          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} />

      <InvoiceCardActions>
        <InvoiceCardAction action="download" />

        <InvoiceCardAction action="view" />
      </InvoiceCardActions>
    </InvoiceCard>
  </div>
</ComponentPreview>

### Custom Currency

Display amounts in different currencies.

<ComponentPreview
  component="invoice-card"
  example="currency"
  code={`<div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />
      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>INV-2024-001</InvoiceCardNumber>
          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>
        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>
      <InvoiceCardAmount amount={29} currency="€" />
    </InvoiceCard>
  </div>`}
>
  <div className="w-full max-w-lg">
    <InvoiceCard>
      <InvoiceCardIcon />

      <InvoiceCardContent>
        <InvoiceCardHeader>
          <InvoiceCardNumber>
            INV-2024-001
          </InvoiceCardNumber>

          <InvoiceCardStatus status="paid" />
        </InvoiceCardHeader>

        <InvoiceCardDate date="2024-01-15" />
      </InvoiceCardContent>

      <InvoiceCardAmount amount={29} currency="€" />
    </InvoiceCard>
  </div>
</ComponentPreview>

## API Reference

### InvoiceCard

The root container component.

| Prop      | Type                     | Default     |
| --------- | ------------------------ | ----------- |
| `variant` | `"default" \| "compact"` | `"default"` |

### InvoiceCardStatus

Badge showing the invoice status.

| Prop     | Type                                                       | Default |
| -------- | ---------------------------------------------------------- | ------- |
| `status` | `"paid" \| "pending" \| "failed" \| "refunded" \| "draft"` | —       |

### InvoiceCardDate

Displays the invoice date.

| Prop     | Type                | Default   |
| -------- | ------------------- | --------- |
| `date`   | `Date \| string`    | —         |
| `format` | `"short" \| "long"` | `"short"` |

### InvoiceCardAmount

Displays the invoice amount.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `amount`   | `number` | —       |
| `currency` | `string` | `"$"`   |

### InvoiceCardAction

Action button for download or view.

| Prop     | Type                   | Default      |
| -------- | ---------------------- | ------------ |
| `action` | `"download" \| "view"` | `"download"` |


# Payment Method



import {
  PaymentMethod,
  PaymentMethodIcon,
  PaymentMethodDetails,
  PaymentMethodNumber,
  PaymentMethodExpiry,
  PaymentMethodBadge,
  PaymentMethodActions,
  PaymentMethodAction,
} from "@/registry/ui";

<ComponentPreview
  component="payment-method"
  example="preview"
  code={`<div className="w-full max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="visa" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="4242" />
        <PaymentMethodExpiry month={12} year={2026} />
      </PaymentMethodDetails>
      <PaymentMethodBadge>Default</PaymentMethodBadge>
      <PaymentMethodActions>
        <PaymentMethodAction action="edit" />
        <PaymentMethodAction action="delete" />
      </PaymentMethodActions>
    </PaymentMethod>
  </div>`}
>
  <div className="w-full max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="visa" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="4242" />

        <PaymentMethodExpiry month={12} year={2026} />
      </PaymentMethodDetails>

      <PaymentMethodBadge>
        Default
      </PaymentMethodBadge>

      <PaymentMethodActions>
        <PaymentMethodAction action="edit" />

        <PaymentMethodAction action="delete" />
      </PaymentMethodActions>
    </PaymentMethod>
  </div>
</ComponentPreview>

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/payment-method.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/payment-method.tsx"
    import { cva, type VariantProps } from "class-variance-authority";
    import { CreditCard, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
    import * as React from "react";
    import { cn } from "@/lib/utils";
    import { Badge } from "@/components/ui/badge";
    import { Button } from "@/components/ui/button";

    // ... component code
    ```
  </Tab>
</Tabs>

## Examples

### Card Brands

Each card brand displays with its official logo.

<ComponentPreview
  component="payment-method"
  example="brands"
  code={`<div className="flex w-full flex-col gap-4 max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="visa" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="4242" />
        <PaymentMethodExpiry month={12} year={2026} />
      </PaymentMethodDetails>
    </PaymentMethod>
    <PaymentMethod>
      <PaymentMethodIcon brand="mastercard" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="5555" />
        <PaymentMethodExpiry month={8} year={2025} />
      </PaymentMethodDetails>
    </PaymentMethod>
    <PaymentMethod>
      <PaymentMethodIcon brand="amex" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="0001" />
        <PaymentMethodExpiry month={3} year={2027} />
      </PaymentMethodDetails>
    </PaymentMethod>
  </div>`}
>
  <div className="flex w-full flex-col gap-4 max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="visa" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="4242" />

        <PaymentMethodExpiry month={12} year={2026} />
      </PaymentMethodDetails>
    </PaymentMethod>

    <PaymentMethod>
      <PaymentMethodIcon brand="mastercard" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="5555" />

        <PaymentMethodExpiry month={8} year={2025} />
      </PaymentMethodDetails>
    </PaymentMethod>

    <PaymentMethod>
      <PaymentMethodIcon brand="amex" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="0001" />

        <PaymentMethodExpiry month={3} year={2027} />
      </PaymentMethodDetails>
    </PaymentMethod>
  </div>
</ComponentPreview>

### Selected State

Use the `selected` variant to highlight the active payment method.

<ComponentPreview
  component="payment-method"
  example="selected"
  code={`<div className="flex w-full flex-col gap-4 max-w-md">
    <PaymentMethod variant="selected">
      <PaymentMethodIcon brand="visa" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="4242" />
        <PaymentMethodExpiry month={12} year={2026} />
      </PaymentMethodDetails>
      <PaymentMethodBadge>Default</PaymentMethodBadge>
    </PaymentMethod>
    <PaymentMethod>
      <PaymentMethodIcon brand="mastercard" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="5555" />
        <PaymentMethodExpiry month={8} year={2025} />
      </PaymentMethodDetails>
    </PaymentMethod>
  </div>`}
>
  <div className="flex w-full flex-col gap-4 max-w-md">
    <PaymentMethod variant="selected">
      <PaymentMethodIcon brand="visa" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="4242" />

        <PaymentMethodExpiry month={12} year={2026} />
      </PaymentMethodDetails>

      <PaymentMethodBadge>
        Default
      </PaymentMethodBadge>
    </PaymentMethod>

    <PaymentMethod>
      <PaymentMethodIcon brand="mastercard" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="5555" />

        <PaymentMethodExpiry month={8} year={2025} />
      </PaymentMethodDetails>
    </PaymentMethod>
  </div>
</ComponentPreview>

### Expired Card

Show expired cards with visual indication.

<ComponentPreview
  component="payment-method"
  example="expired"
  code={`<div className="w-full max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="visa" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="1234" />
        <PaymentMethodExpiry month={1} year={2023} expired />
      </PaymentMethodDetails>
      <PaymentMethodActions>
        <PaymentMethodAction action="edit" />
        <PaymentMethodAction action="delete" />
      </PaymentMethodActions>
    </PaymentMethod>
  </div>`}
>
  <div className="w-full max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="visa" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="1234" />

        <PaymentMethodExpiry month={1} year={2023} expired />
      </PaymentMethodDetails>

      <PaymentMethodActions>
        <PaymentMethodAction action="edit" />

        <PaymentMethodAction action="delete" />
      </PaymentMethodActions>
    </PaymentMethod>
  </div>
</ComponentPreview>

### With Actions

Include edit, delete, or more options buttons.

<ComponentPreview
  component="payment-method"
  example="actions"
  code={`<div className="w-full max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="mastercard" />
      <PaymentMethodDetails>
        <PaymentMethodNumber last4="8888" />
        <PaymentMethodExpiry month={6} year={2028} />
      </PaymentMethodDetails>
      <PaymentMethodActions>
        <PaymentMethodAction action="edit" />
        <PaymentMethodAction action="delete" />
        <PaymentMethodAction action="more" />
      </PaymentMethodActions>
    </PaymentMethod>
  </div>`}
>
  <div className="w-full max-w-md">
    <PaymentMethod>
      <PaymentMethodIcon brand="mastercard" />

      <PaymentMethodDetails>
        <PaymentMethodNumber last4="8888" />

        <PaymentMethodExpiry month={6} year={2028} />
      </PaymentMethodDetails>

      <PaymentMethodActions>
        <PaymentMethodAction action="edit" />

        <PaymentMethodAction action="delete" />

        <PaymentMethodAction action="more" />
      </PaymentMethodActions>
    </PaymentMethod>
  </div>
</ComponentPreview>

## API Reference

### PaymentMethod

The root container for the payment method card.

| Prop      | Type                      | Default     | Description          |
| --------- | ------------------------- | ----------- | -------------------- |
| `variant` | `"default" \| "selected"` | `"default"` | Visual style variant |

### PaymentMethodIcon

Displays the card brand logo (SVGs embedded inline for easy distribution).

| Prop    | Type                                            | Default     | Description |
| ------- | ----------------------------------------------- | ----------- | ----------- |
| `brand` | `"visa" \| "mastercard" \| "amex" \| "generic"` | `"generic"` | Card brand  |

### PaymentMethodNumber

Displays the masked card number.

| Prop    | Type     | Default | Description               |
| ------- | -------- | ------- | ------------------------- |
| `last4` | `string` | -       | Last 4 digits of the card |

### PaymentMethodExpiry

Displays the card expiration date.

| Prop      | Type      | Default | Description             |
| --------- | --------- | ------- | ----------------------- |
| `month`   | `number`  | -       | Expiration month (1-12) |
| `year`    | `number`  | -       | Expiration year         |
| `expired` | `boolean` | `false` | Shows expired indicator |

### PaymentMethodAction

Action button for the payment method.

| Prop     | Type                           | Default  | Description    |
| -------- | ------------------------------ | -------- | -------------- |
| `action` | `"edit" \| "delete" \| "more"` | `"more"` | Type of action |


# Plan Card



import {
  PlanCard,
  PlanCardHeader,
  PlanCardBadge,
  PlanCardTitle,
  PlanCardDescription,
  PlanCardPrice,
  PlanCardFeatures,
  PlanCardFeature,
  PlanCardAction,
} from "@/registry/ui";

<ComponentPreview
  component="plan-card"
  example="preview"
  code={`<PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>Most Popular</PlanCardBadge>
      <PlanCardTitle>Pro</PlanCardTitle>
      <PlanCardDescription>For growing teams</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={29} originalAmount={49} period="month" />
    <PlanCardFeatures>
      <PlanCardFeature included>Unlimited projects</PlanCardFeature>
      <PlanCardFeature included>Advanced analytics</PlanCardFeature>
      <PlanCardFeature included>Priority support</PlanCardFeature>
      <PlanCardFeature included={false}>Custom integrations</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction>Get Started</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>
        Most Popular
      </PlanCardBadge>

      <PlanCardTitle>
        Pro
      </PlanCardTitle>

      <PlanCardDescription>
        For growing teams
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={29} originalAmount={49} period="month" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        Unlimited projects
      </PlanCardFeature>

      <PlanCardFeature included>
        Advanced analytics
      </PlanCardFeature>

      <PlanCardFeature included>
        Priority support
      </PlanCardFeature>

      <PlanCardFeature included={false}>
        Custom integrations
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction>
      Get Started
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/plan-card.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/plan-card.tsx"
    import { cva, type VariantProps } from "class-variance-authority";
    import { Check, X } from "lucide-react";
    import * as React from "react";
    import { cn } from "@/lib/utils";
    import { Badge } from "@/registry/shadcn/badge";
    import { Button } from "@/registry/shadcn/button";

    const planCardVariants = cva(
      "relative flex flex-col rounded-2xl border bg-card text-card-foreground transition-all duration-200 min-w-[280px]",
      {
        variants: {
          variant: {
            default: "border-border",
            highlighted:
              "border-primary shadow-lg shadow-primary/10 ring-1 ring-primary",
            compact: "border-border p-4",
          },
          size: {
            default: "p-6",
            lg: "p-8",
          },
        },
        defaultVariants: {
          variant: "default",
          size: "default",
        },
      },
    );

    interface PlanCardProps
      extends React.HTMLAttributes<HTMLDivElement>,
        VariantProps<typeof planCardVariants> {}

    const PlanCard = React.forwardRef<HTMLDivElement, PlanCardProps>(
      ({ className, variant, size, ...props }, ref) => (
        <div
          ref={ref}
          className={cn(planCardVariants({ variant, size, className }))}
          {...props}
        />
      ),
    );
    PlanCard.displayName = "PlanCard";

    const PlanCardHeader = React.forwardRef<
      HTMLDivElement,
      React.HTMLAttributes<HTMLDivElement>
    >(({ className, ...props }, ref) => (
      <div ref={ref} className={cn("flex flex-col gap-2", className)} {...props} />
    ));
    PlanCardHeader.displayName = "PlanCardHeader";

    interface PlanCardBadgeProps
      extends React.ComponentPropsWithoutRef<typeof Badge> {}

    const PlanCardBadge = React.forwardRef<HTMLDivElement, PlanCardBadgeProps>(
      ({ className, ...props }, ref) => (
        <Badge ref={ref} className={cn("w-fit", className)} {...props} />
      ),
    );
    PlanCardBadge.displayName = "PlanCardBadge";

    const PlanCardTitle = React.forwardRef<
      HTMLHeadingElement,
      React.HTMLAttributes<HTMLHeadingElement>
    >(({ className, ...props }, ref) => (
      <h3
        ref={ref}
        className={cn("text-2xl font-bold tracking-tight", className)}
        {...props}
      />
    ));
    PlanCardTitle.displayName = "PlanCardTitle";

    const PlanCardDescription = React.forwardRef<
      HTMLParagraphElement,
      React.HTMLAttributes<HTMLParagraphElement>
    >(({ className, ...props }, ref) => (
      <p
        ref={ref}
        className={cn("text-sm text-muted-foreground", className)}
        {...props}
      />
    ));
    PlanCardDescription.displayName = "PlanCardDescription";

    interface PlanCardPriceProps extends React.HTMLAttributes<HTMLDivElement> {
      amount: number;
      currency?: string;
      period?: "month" | "year" | "once";
      originalAmount?: number;
    }

    const PlanCardPrice = React.forwardRef<HTMLDivElement, PlanCardPriceProps>(
      (
        {
          className,
          amount,
          currency = "$",
          period = "month",
          originalAmount,
          ...props
        },
        ref,
      ) => {
        const periodLabel = {
          month: "/mo",
          year: "/yr",
          once: "",
        };

        return (
          <div
            ref={ref}
            className={cn("my-6 flex items-baseline gap-1", className)}
            {...props}
          >
            {originalAmount && (
              <span className="text-lg text-muted-foreground line-through">
                {currency}
                {originalAmount}
              </span>
            )}
            <span className="text-4xl font-bold tracking-tight">
              {currency}
              {amount}
            </span>
            {period !== "once" && (
              <span className="text-muted-foreground">{periodLabel[period]}</span>
            )}
          </div>
        );
      },
    );
    PlanCardPrice.displayName = "PlanCardPrice";

    const PlanCardFeatures = React.forwardRef<
      HTMLUListElement,
      React.HTMLAttributes<HTMLUListElement>
    >(({ className, ...props }, ref) => (
      <ul
        ref={ref}
        className={cn("flex flex-col gap-3 text-sm", className)}
        {...props}
      />
    ));
    PlanCardFeatures.displayName = "PlanCardFeatures";

    interface PlanCardFeatureProps extends React.HTMLAttributes<HTMLLIElement> {
      included?: boolean;
    }

    const PlanCardFeature = React.forwardRef<HTMLLIElement, PlanCardFeatureProps>(
      ({ className, included = true, children, ...props }, ref) => (
        <li
          ref={ref}
          className={cn(
            "flex items-center gap-3",
            !included && "text-muted-foreground",
            className,
          )}
          {...props}
        >
          {included ? (
            <Check className="h-4 w-4 shrink-0 text-primary" />
          ) : (
            <X className="h-4 w-4 shrink-0 text-muted-foreground" />
          )}
          <span>{children}</span>
        </li>
      ),
    );
    PlanCardFeature.displayName = "PlanCardFeature";

    interface PlanCardActionProps
      extends React.ComponentPropsWithoutRef<typeof Button> {}

    const PlanCardAction = React.forwardRef<HTMLButtonElement, PlanCardActionProps>(
      ({ className, ...props }, ref) => (
        <Button ref={ref} className={cn("mt-6 w-full", className)} {...props} />
      ),
    );
    PlanCardAction.displayName = "PlanCardAction";

    export {
      PlanCard,
      PlanCardHeader,
      PlanCardBadge,
      PlanCardTitle,
      PlanCardDescription,
      PlanCardPrice,
      PlanCardFeatures,
      PlanCardFeature,
      PlanCardAction,
      planCardVariants,
    };

    export type {
      PlanCardProps,
      PlanCardBadgeProps,
      PlanCardPriceProps,
      PlanCardFeatureProps,
      PlanCardActionProps,
    };
    ```
  </Tab>
</Tabs>

## Examples

### Default Variant

<ComponentPreview
  component="plan-card"
  example="default"
  code={`<PlanCard>
    <PlanCardHeader>
      <PlanCardTitle>Basic</PlanCardTitle>
      <PlanCardDescription>For individuals</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={9} period="month" />
    <PlanCardFeatures>
      <PlanCardFeature included>5 projects</PlanCardFeature>
      <PlanCardFeature included>Basic analytics</PlanCardFeature>
      <PlanCardFeature included={false}>Priority support</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction variant="outline">Get Started</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard>
    <PlanCardHeader>
      <PlanCardTitle>
        Basic
      </PlanCardTitle>

      <PlanCardDescription>
        For individuals
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={9} period="month" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        5 projects
      </PlanCardFeature>

      <PlanCardFeature included>
        Basic analytics
      </PlanCardFeature>

      <PlanCardFeature included={false}>
        Priority support
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction variant="outline">
      Get Started
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

### Highlighted Variant

Use the `highlighted` variant to emphasize a recommended plan.

<ComponentPreview
  component="plan-card"
  example="highlighted"
  code={`<PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>Most Popular</PlanCardBadge>
      <PlanCardTitle>Pro</PlanCardTitle>
      <PlanCardDescription>For growing teams</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={29} period="month" />
    <PlanCardFeatures>
      <PlanCardFeature included>Unlimited projects</PlanCardFeature>
      <PlanCardFeature included>Advanced analytics</PlanCardFeature>
      <PlanCardFeature included>Priority support</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction>Get Started</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>
        Most Popular
      </PlanCardBadge>

      <PlanCardTitle>
        Pro
      </PlanCardTitle>

      <PlanCardDescription>
        For growing teams
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={29} period="month" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        Unlimited projects
      </PlanCardFeature>

      <PlanCardFeature included>
        Advanced analytics
      </PlanCardFeature>

      <PlanCardFeature included>
        Priority support
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction>
      Get Started
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

### With Discount

Show original price with strikethrough to highlight discounts.

<ComponentPreview
  component="plan-card"
  example="discount"
  code={`<PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>40% OFF</PlanCardBadge>
      <PlanCardTitle>Pro</PlanCardTitle>
      <PlanCardDescription>For growing teams</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={29} originalAmount={49} period="month" />
    <PlanCardFeatures>
      <PlanCardFeature included>Unlimited projects</PlanCardFeature>
      <PlanCardFeature included>Advanced analytics</PlanCardFeature>
      <PlanCardFeature included>Priority support</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction>Get Started</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>
        40% OFF
      </PlanCardBadge>

      <PlanCardTitle>
        Pro
      </PlanCardTitle>

      <PlanCardDescription>
        For growing teams
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={29} originalAmount={49} period="month" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        Unlimited projects
      </PlanCardFeature>

      <PlanCardFeature included>
        Advanced analytics
      </PlanCardFeature>

      <PlanCardFeature included>
        Priority support
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction>
      Get Started
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

### Yearly Period

<ComponentPreview
  component="plan-card"
  example="yearly"
  code={`<PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>Save 20%</PlanCardBadge>
      <PlanCardTitle>Yearly</PlanCardTitle>
      <PlanCardDescription>Billed annually</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={279} period="year" />
    <PlanCardFeatures>
      <PlanCardFeature included>All features</PlanCardFeature>
      <PlanCardFeature included>2 months free</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction>Subscribe</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>
        Save 20%
      </PlanCardBadge>

      <PlanCardTitle>
        Yearly
      </PlanCardTitle>

      <PlanCardDescription>
        Billed annually
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={279} period="year" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        All features
      </PlanCardFeature>

      <PlanCardFeature included>
        2 months free
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction>
      Subscribe
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

### One-time Payment

Use `period="once"` for lifetime or one-time purchases.

<ComponentPreview
  component="plan-card"
  example="once"
  code={`<PlanCard>
    <PlanCardHeader>
      <PlanCardTitle>Lifetime</PlanCardTitle>
      <PlanCardDescription>One-time payment</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={499} period="once" />
    <PlanCardFeatures>
      <PlanCardFeature included>All features forever</PlanCardFeature>
      <PlanCardFeature included>Free updates</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction variant="outline">Buy Now</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard>
    <PlanCardHeader>
      <PlanCardTitle>
        Lifetime
      </PlanCardTitle>

      <PlanCardDescription>
        One-time payment
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={499} period="once" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        All features forever
      </PlanCardFeature>

      <PlanCardFeature included>
        Free updates
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction variant="outline">
      Buy Now
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

### Compact Variant

Use the `compact` variant for smaller plan cards.

<ComponentPreview
  component="plan-card"
  example="compact"
  code={`<PlanCard variant="compact">
    <PlanCardHeader>
      <PlanCardTitle>Starter</PlanCardTitle>
      <PlanCardDescription>Get started quickly</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={0} period="month" />
    <PlanCardFeatures>
      <PlanCardFeature included>3 projects</PlanCardFeature>
      <PlanCardFeature included>Community support</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction variant="outline">Start Free</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard variant="compact">
    <PlanCardHeader>
      <PlanCardTitle>
        Starter
      </PlanCardTitle>

      <PlanCardDescription>
        Get started quickly
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={0} period="month" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        3 projects
      </PlanCardFeature>

      <PlanCardFeature included>
        Community support
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction variant="outline">
      Start Free
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

### Large Size

Use `size="lg"` for more spacious plan cards.

<ComponentPreview
  component="plan-card"
  example="large"
  code={`<PlanCard size="lg" variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>Best Value</PlanCardBadge>
      <PlanCardTitle>Professional</PlanCardTitle>
      <PlanCardDescription>Everything you need to scale your business</PlanCardDescription>
    </PlanCardHeader>
    <PlanCardPrice amount={79} period="month" />
    <PlanCardFeatures>
      <PlanCardFeature included>Unlimited everything</PlanCardFeature>
      <PlanCardFeature included>Advanced analytics</PlanCardFeature>
      <PlanCardFeature included>Priority support</PlanCardFeature>
      <PlanCardFeature included>Custom integrations</PlanCardFeature>
      <PlanCardFeature included>API access</PlanCardFeature>
    </PlanCardFeatures>
    <PlanCardAction>Start Free Trial</PlanCardAction>
  </PlanCard>`}
>
  <PlanCard size="lg" variant="highlighted">
    <PlanCardHeader>
      <PlanCardBadge>
        Best Value
      </PlanCardBadge>

      <PlanCardTitle>
        Professional
      </PlanCardTitle>

      <PlanCardDescription>
        Everything you need to scale your business
      </PlanCardDescription>
    </PlanCardHeader>

    <PlanCardPrice amount={79} period="month" />

    <PlanCardFeatures>
      <PlanCardFeature included>
        Unlimited everything
      </PlanCardFeature>

      <PlanCardFeature included>
        Advanced analytics
      </PlanCardFeature>

      <PlanCardFeature included>
        Priority support
      </PlanCardFeature>

      <PlanCardFeature included>
        Custom integrations
      </PlanCardFeature>

      <PlanCardFeature included>
        API access
      </PlanCardFeature>
    </PlanCardFeatures>

    <PlanCardAction>
      Start Free Trial
    </PlanCardAction>
  </PlanCard>
</ComponentPreview>

## API Reference

### PlanCard

The root container component.

| Prop      | Type                                      | Default     |
| --------- | ----------------------------------------- | ----------- |
| `variant` | `"default" \| "highlighted" \| "compact"` | `"default"` |
| `size`    | `"default" \| "lg"`                       | `"default"` |

### PlanCardBadge

Optional badge for highlighting plans.

| Prop      | Type                                    | Default     |
| --------- | --------------------------------------- | ----------- |
| `variant` | `"default" \| "secondary" \| "outline"` | `"default"` |

### PlanCardPrice

Displays the price with optional original price for discounts.

| Prop             | Type                          | Default   |
| ---------------- | ----------------------------- | --------- |
| `amount`         | `number`                      | —         |
| `currency`       | `string`                      | `"$"`     |
| `period`         | `"month" \| "year" \| "once"` | `"month"` |
| `originalAmount` | `number`                      | —         |

### PlanCardFeature

Individual feature item with included/excluded state.

| Prop       | Type      | Default |
| ---------- | --------- | ------- |
| `included` | `boolean` | `true`  |

### PlanCardAction

CTA button for the plan card.

| Prop      | Type                                    | Default     |
| --------- | --------------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "secondary"` | `"default"` |


# Plan Group



import {
  PlanGroup,
  PlanGroupHeader,
  PlanGroupTitle,
  PlanGroupDescription,
  PlanGroupToggle,
  PlanGroupContent,
  PlanPrice,
  PlanCard,
  PlanCardHeader,
  PlanCardBadge,
  PlanCardTitle,
  PlanCardDescription,
  PlanCardPrice,
  PlanCardFeatures,
  PlanCardFeature,
  PlanCardAction,
} from "@/registry/ui";

<ComponentPreview
  component="plan-group"
  example="preview"
  code={`<PlanGroup>
    <PlanGroupHeader>
      <PlanGroupTitle>Simple, transparent pricing</PlanGroupTitle>
      <PlanGroupDescription>
        Choose the plan that works best for you. All plans include a 14-day free trial.
      </PlanGroupDescription>
      <PlanGroupToggle yearDiscount="Save 20%" />
    </PlanGroupHeader>
    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>Free</PlanCardTitle>
          <PlanCardDescription>For individuals</PlanCardDescription>
        </PlanCardHeader>
        <PlanPrice monthlyAmount={0} yearlyAmount={0} />
        <PlanCardFeatures>
          <PlanCardFeature included>Up to 3 projects</PlanCardFeature>
          <PlanCardFeature included>Basic analytics</PlanCardFeature>
          <PlanCardFeature included>Community support</PlanCardFeature>
          <PlanCardFeature included={false}>Custom integrations</PlanCardFeature>
          <PlanCardFeature included={false}>Priority support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction variant="outline">Get Started</PlanCardAction>
      </PlanCard>
      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <div className="flex items-center justify-between">
            <PlanCardTitle>Pro</PlanCardTitle>
            <PlanCardBadge>Most Popular</PlanCardBadge>
          </div>
          <PlanCardDescription>For growing teams</PlanCardDescription>
        </PlanCardHeader>
        <PlanPrice monthlyAmount={29} yearlyAmount={278} originalMonthlyAmount={49} originalYearlyAmount={470} />
        <PlanCardFeatures>
          <PlanCardFeature included>Unlimited projects</PlanCardFeature>
          <PlanCardFeature included>Advanced analytics</PlanCardFeature>
          <PlanCardFeature included>Priority support</PlanCardFeature>
          <PlanCardFeature included>Custom integrations</PlanCardFeature>
          <PlanCardFeature included>Dedicated manager</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction>Get Started</PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>`}
>
  <PlanGroup>
    <PlanGroupHeader>
      <PlanGroupTitle>
        Simple, transparent pricing
      </PlanGroupTitle>

      <PlanGroupDescription>
        Choose the plan that works best for you. All plans include a 14-day free trial.
      </PlanGroupDescription>

      <PlanGroupToggle yearDiscount="Save 20%" />
    </PlanGroupHeader>

    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>
            Free
          </PlanCardTitle>

          <PlanCardDescription>
            For individuals
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanPrice monthlyAmount={0} yearlyAmount={0} />

        <PlanCardFeatures>
          <PlanCardFeature included>
            Up to 3 projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Basic analytics
          </PlanCardFeature>

          <PlanCardFeature included>
            Community support
          </PlanCardFeature>

          <PlanCardFeature included={false}>
            Custom integrations
          </PlanCardFeature>

          <PlanCardFeature included={false}>
            Priority support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction variant="outline">
          Get Started
        </PlanCardAction>
      </PlanCard>

      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <div className="flex items-center justify-between">
            <PlanCardTitle>
              Pro
            </PlanCardTitle>

            <PlanCardBadge>
              Most Popular
            </PlanCardBadge>
          </div>

          <PlanCardDescription>
            For growing teams
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanPrice monthlyAmount={29} yearlyAmount={278} originalMonthlyAmount={49} originalYearlyAmount={470} />

        <PlanCardFeatures>
          <PlanCardFeature included>
            Unlimited projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Advanced analytics
          </PlanCardFeature>

          <PlanCardFeature included>
            Priority support
          </PlanCardFeature>

          <PlanCardFeature included>
            Custom integrations
          </PlanCardFeature>

          <PlanCardFeature included>
            Dedicated manager
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction>
          Get Started
        </PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/plan-group.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/plan-group.tsx"
    "use client";

    import { cva, type VariantProps } from "class-variance-authority";
    import * as React from "react";

    import { cn } from "@/lib/utils";
    import { PlanCardPrice } from "./plan-card";

    // ... component code
    ```
  </Tab>
</Tabs>

## Examples

### Horizontal Card Layout

Use `layout="horizontal"` on `PlanCard` combined with `layout="vertical"` on `PlanGroupContent` to create a row-style pricing list.

<ComponentPreview
  component="plan-group"
  example="horizontal"
  code={`<PlanGroup>
    <PlanGroupHeader>
      <PlanGroupTitle>Compare plans</PlanGroupTitle>
      <PlanGroupToggle />
    </PlanGroupHeader>
    <PlanGroupContent layout="vertical">
      <PlanCard layout="horizontal" className="min-w-[500px] grid grid-cols-[1fr_auto] gap-x-8 gap-y-3">
        <div className="flex items-center gap-2">
          <PlanCardTitle>Basic</PlanCardTitle>
        </div>
        <PlanPrice monthlyAmount={9} yearlyAmount={90} className="my-0 justify-self-end" />
        <PlanCardFeatures>
          <PlanCardFeature included>5 projects</PlanCardFeature>
          <PlanCardFeature included>Basic analytics</PlanCardFeature>
          <PlanCardFeature included={false}>Priority support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction variant="outline" className="mt-0 w-auto self-end justify-self-end">Select</PlanCardAction>
      </PlanCard>
      <PlanCard layout="horizontal" variant="highlighted" className="min-w-[500px] grid grid-cols-[1fr_auto] gap-x-8 gap-y-3">
        <div className="flex items-center gap-2">
          <PlanCardTitle>Pro</PlanCardTitle>
          <PlanCardBadge>Popular</PlanCardBadge>
        </div>
        <PlanPrice monthlyAmount={29} yearlyAmount={290} className="my-0 justify-self-end" />
        <PlanCardFeatures>
          <PlanCardFeature included>Unlimited projects</PlanCardFeature>
          <PlanCardFeature included>Advanced analytics</PlanCardFeature>
          <PlanCardFeature included>Priority support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction className="mt-0 w-auto self-end justify-self-end">Select</PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>`}
>
  <PlanGroup>
    <PlanGroupHeader>
      <PlanGroupTitle>
        Compare plans
      </PlanGroupTitle>

      <PlanGroupToggle />
    </PlanGroupHeader>

    <PlanGroupContent layout="vertical">
      <PlanCard layout="horizontal" className="min-w-[500px] grid grid-cols-[1fr_auto] gap-x-8 gap-y-3">
        <div className="flex items-center gap-2">
          <PlanCardTitle>
            Basic
          </PlanCardTitle>
        </div>

        <PlanPrice monthlyAmount={9} yearlyAmount={90} className="my-0 justify-self-end" />

        <PlanCardFeatures>
          <PlanCardFeature included>
            5 projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Basic analytics
          </PlanCardFeature>

          <PlanCardFeature included={false}>
            Priority support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction variant="outline" className="mt-0 w-auto self-end justify-self-end">
          Select
        </PlanCardAction>
      </PlanCard>

      <PlanCard layout="horizontal" variant="highlighted" className="min-w-[500px] grid grid-cols-[1fr_auto] gap-x-8 gap-y-3">
        <div className="flex items-center gap-2">
          <PlanCardTitle>
            Pro
          </PlanCardTitle>

          <PlanCardBadge>
            Popular
          </PlanCardBadge>
        </div>

        <PlanPrice monthlyAmount={29} yearlyAmount={290} className="my-0 justify-self-end" />

        <PlanCardFeatures>
          <PlanCardFeature included>
            Unlimited projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Advanced analytics
          </PlanCardFeature>

          <PlanCardFeature included>
            Priority support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction className="mt-0 w-auto self-end justify-self-end">
          Select
        </PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>
</ComponentPreview>

### Default Yearly Period

Set `defaultPeriod="year"` to show yearly prices by default.

<ComponentPreview
  component="plan-group"
  example="yearly"
  code={`<PlanGroup defaultPeriod="year">
    <PlanGroupHeader>
      <PlanGroupTitle>Annual pricing</PlanGroupTitle>
      <PlanGroupDescription>Save more with yearly billing</PlanGroupDescription>
      <PlanGroupToggle yearDiscount="Save 20%" />
    </PlanGroupHeader>
    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>Hobby</PlanCardTitle>
          <PlanCardDescription>For side projects</PlanCardDescription>
        </PlanCardHeader>
        <PlanPrice monthlyAmount={5} yearlyAmount={48} />
        <PlanCardFeatures>
          <PlanCardFeature included>3 projects</PlanCardFeature>
          <PlanCardFeature included>Community support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction variant="outline">Start Free</PlanCardAction>
      </PlanCard>
      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <PlanCardBadge>Best Value</PlanCardBadge>
          <PlanCardTitle>Team</PlanCardTitle>
          <PlanCardDescription>For small teams</PlanCardDescription>
        </PlanCardHeader>
        <PlanPrice monthlyAmount={15} yearlyAmount={144} originalMonthlyAmount={20} originalYearlyAmount={192} />
        <PlanCardFeatures>
          <PlanCardFeature included>Unlimited projects</PlanCardFeature>
          <PlanCardFeature included>Team collaboration</PlanCardFeature>
          <PlanCardFeature included>Priority support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction>Subscribe Now</PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>`}
>
  <PlanGroup defaultPeriod="year">
    <PlanGroupHeader>
      <PlanGroupTitle>
        Annual pricing
      </PlanGroupTitle>

      <PlanGroupDescription>
        Save more with yearly billing
      </PlanGroupDescription>

      <PlanGroupToggle yearDiscount="Save 20%" />
    </PlanGroupHeader>

    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>
            Hobby
          </PlanCardTitle>

          <PlanCardDescription>
            For side projects
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanPrice monthlyAmount={5} yearlyAmount={48} />

        <PlanCardFeatures>
          <PlanCardFeature included>
            3 projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Community support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction variant="outline">
          Start Free
        </PlanCardAction>
      </PlanCard>

      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <PlanCardBadge>
            Best Value
          </PlanCardBadge>

          <PlanCardTitle>
            Team
          </PlanCardTitle>

          <PlanCardDescription>
            For small teams
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanPrice monthlyAmount={15} yearlyAmount={144} originalMonthlyAmount={20} originalYearlyAmount={192} />

        <PlanCardFeatures>
          <PlanCardFeature included>
            Unlimited projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Team collaboration
          </PlanCardFeature>

          <PlanCardFeature included>
            Priority support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction>
          Subscribe Now
        </PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>
</ComponentPreview>

### Custom Toggle Labels

Customize the toggle labels with `monthLabel` and `yearLabel`.

<ComponentPreview
  component="plan-group"
  example="custom-labels"
  code={`<PlanGroup>
    <PlanGroupHeader>
      <PlanGroupTitle>Flexible billing</PlanGroupTitle>
      <PlanGroupToggle monthLabel="Pay Monthly" yearLabel="Pay Annually" yearDiscount="-17%" />
    </PlanGroupHeader>
    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>Solo</PlanCardTitle>
          <PlanCardDescription>For freelancers</PlanCardDescription>
        </PlanCardHeader>
        <PlanPrice monthlyAmount={12} yearlyAmount={120} />
        <PlanCardFeatures>
          <PlanCardFeature included>10 projects</PlanCardFeature>
          <PlanCardFeature included>Email support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction variant="outline">Get Started</PlanCardAction>
      </PlanCard>
      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <PlanCardTitle>Agency</PlanCardTitle>
          <PlanCardDescription>For creative agencies</PlanCardDescription>
        </PlanCardHeader>
        <PlanPrice monthlyAmount={49} yearlyAmount={490} />
        <PlanCardFeatures>
          <PlanCardFeature included>Unlimited projects</PlanCardFeature>
          <PlanCardFeature included>White-label reports</PlanCardFeature>
          <PlanCardFeature included>24/7 support</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction>Get Started</PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>`}
>
  <PlanGroup>
    <PlanGroupHeader>
      <PlanGroupTitle>
        Flexible billing
      </PlanGroupTitle>

      <PlanGroupToggle monthLabel="Pay Monthly" yearLabel="Pay Annually" yearDiscount="-17%" />
    </PlanGroupHeader>

    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>
            Solo
          </PlanCardTitle>

          <PlanCardDescription>
            For freelancers
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanPrice monthlyAmount={12} yearlyAmount={120} />

        <PlanCardFeatures>
          <PlanCardFeature included>
            10 projects
          </PlanCardFeature>

          <PlanCardFeature included>
            Email support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction variant="outline">
          Get Started
        </PlanCardAction>
      </PlanCard>

      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <PlanCardTitle>
            Agency
          </PlanCardTitle>

          <PlanCardDescription>
            For creative agencies
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanPrice monthlyAmount={49} yearlyAmount={490} />

        <PlanCardFeatures>
          <PlanCardFeature included>
            Unlimited projects
          </PlanCardFeature>

          <PlanCardFeature included>
            White-label reports
          </PlanCardFeature>

          <PlanCardFeature included>
            24/7 support
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction>
          Get Started
        </PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>
</ComponentPreview>

### Without Header

You can use PlanGroup without a header for simpler use cases.

<ComponentPreview
  component="plan-group"
  example="no-header"
  code={`<PlanGroup>
    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>Monthly</PlanCardTitle>
          <PlanCardDescription>Flexible billing</PlanCardDescription>
        </PlanCardHeader>
        <PlanCardPrice amount={29} period="month" />
        <PlanCardFeatures>
          <PlanCardFeature included>All features</PlanCardFeature>
          <PlanCardFeature included>Cancel anytime</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction variant="outline">Subscribe</PlanCardAction>
      </PlanCard>
      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <PlanCardBadge>Save $70</PlanCardBadge>
          <PlanCardTitle>Annual</PlanCardTitle>
          <PlanCardDescription>Best value</PlanCardDescription>
        </PlanCardHeader>
        <PlanCardPrice amount={278} period="year" />
        <PlanCardFeatures>
          <PlanCardFeature included>All features</PlanCardFeature>
          <PlanCardFeature included>2 months free</PlanCardFeature>
        </PlanCardFeatures>
        <PlanCardAction>Subscribe</PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>`}
>
  <PlanGroup>
    <PlanGroupContent>
      <PlanCard>
        <PlanCardHeader>
          <PlanCardTitle>
            Monthly
          </PlanCardTitle>

          <PlanCardDescription>
            Flexible billing
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanCardPrice amount={29} period="month" />

        <PlanCardFeatures>
          <PlanCardFeature included>
            All features
          </PlanCardFeature>

          <PlanCardFeature included>
            Cancel anytime
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction variant="outline">
          Subscribe
        </PlanCardAction>
      </PlanCard>

      <PlanCard variant="highlighted">
        <PlanCardHeader>
          <PlanCardBadge>
            Save $70
          </PlanCardBadge>

          <PlanCardTitle>
            Annual
          </PlanCardTitle>

          <PlanCardDescription>
            Best value
          </PlanCardDescription>
        </PlanCardHeader>

        <PlanCardPrice amount={278} period="year" />

        <PlanCardFeatures>
          <PlanCardFeature included>
            All features
          </PlanCardFeature>

          <PlanCardFeature included>
            2 months free
          </PlanCardFeature>
        </PlanCardFeatures>

        <PlanCardAction>
          Subscribe
        </PlanCardAction>
      </PlanCard>
    </PlanGroupContent>
  </PlanGroup>
</ComponentPreview>

## API Reference

### PlanGroup

The root container component that provides context for billing period state.

| Prop             | Type                              | Default   |
| ---------------- | --------------------------------- | --------- |
| `defaultPeriod`  | `"month" \| "year"`               | `"month"` |
| `onPeriodChange` | `(period: BillingPeriod) => void` | —         |

### PlanGroupHeader

Container for the title, description, and toggle.

### PlanGroupTitle

The main heading for the pricing section.

### PlanGroupDescription

Supporting text below the title.

### PlanGroupToggle

Toggle button for switching between monthly and yearly billing.

| Prop           | Type     | Default     |
| -------------- | -------- | ----------- |
| `monthLabel`   | `string` | `"Monthly"` |
| `yearLabel`    | `string` | `"Yearly"`  |
| `yearDiscount` | `string` | —           |

### PlanGroupContent

Grid container for the pricing cards.

| Prop      | Type                         | Default        |
| --------- | ---------------------------- | -------------- |
| `layout`  | `"horizontal" \| "vertical"` | `"horizontal"` |
| `columns` | `2 \| 3 \| 4`                | `2`            |

### PlanPrice

Price display that responds to the billing period toggle. Use this instead of `PlanCardPrice` when you want the price to change with the toggle.

| Prop                    | Type     | Default |
| ----------------------- | -------- | ------- |
| `monthlyAmount`         | `number` | —       |
| `yearlyAmount`          | `number` | —       |
| `currency`              | `string` | `"$"`   |
| `originalMonthlyAmount` | `number` | —       |
| `originalYearlyAmount`  | `number` | —       |

### usePlanGroup

Hook to access the billing period state from child components.

```tsx
const { period, setPeriod } = usePlanGroup();
```


# Pricing Table



import {
  PricingTable,
  PricingTableHeader,
  PricingTablePlan,
  PricingTablePlanName,
  PricingTablePrice,
  PricingTablePlanDescription,
  PricingTableAction,
  PricingTableBody,
  PricingTableRow,
  PricingTableFeatureCell,
  PricingTableSpacer,
  PricingTableCell,
  PricingTableFeatureLabel,
} from "@/registry/ui";

<ComponentPreview
  component="pricing-table"
  example="preview"
  code={`<PricingTable className="max-w-4xl">
    <PricingTableHeader columns={4}>
      <PricingTableSpacer />
      <PricingTablePlan>
        <PricingTablePlanName>Free</PricingTablePlanName>
        <PricingTablePrice amount={0} />
        <PricingTablePlanDescription>For individuals</PricingTablePlanDescription>
        <PricingTableAction variant="outline">Get Started</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan highlighted>
        <PricingTablePlanName>Pro</PricingTablePlanName>
        <PricingTablePrice amount={29} />
        <PricingTablePlanDescription>For small teams</PricingTablePlanDescription>
        <PricingTableAction>Start Trial</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan>
        <PricingTablePlanName>Enterprise</PricingTablePlanName>
        <PricingTablePrice amount={99} />
        <PricingTablePlanDescription>For large orgs</PricingTablePlanDescription>
        <PricingTableAction variant="outline">Contact Sales</PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>
    <PricingTableBody>
      <PricingTableFeatureLabel>Usage</PricingTableFeatureLabel>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Projects</PricingTableFeatureCell>
        <PricingTableCell value="3" />
        <PricingTableCell value="Unlimited" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Team members</PricingTableFeatureCell>
        <PricingTableCell value="1" />
        <PricingTableCell value="10" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Storage</PricingTableFeatureCell>
        <PricingTableCell value="1 GB" />
        <PricingTableCell value="100 GB" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableFeatureLabel>Features</PricingTableFeatureLabel>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Analytics</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Custom domains</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>API access</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value="partial" highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Priority support</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={false} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>SSO</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={false} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>`}
>
  <PricingTable className="max-w-4xl">
    <PricingTableHeader columns={4}>
      <PricingTableSpacer />

      <PricingTablePlan>
        <PricingTablePlanName>
          Free
        </PricingTablePlanName>

        <PricingTablePrice amount={0} />

        <PricingTablePlanDescription>
          For individuals
        </PricingTablePlanDescription>

        <PricingTableAction variant="outline">
          Get Started
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan highlighted>
        <PricingTablePlanName>
          Pro
        </PricingTablePlanName>

        <PricingTablePrice amount={29} />

        <PricingTablePlanDescription>
          For small teams
        </PricingTablePlanDescription>

        <PricingTableAction>
          Start Trial
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan>
        <PricingTablePlanName>
          Enterprise
        </PricingTablePlanName>

        <PricingTablePrice amount={99} />

        <PricingTablePlanDescription>
          For large orgs
        </PricingTablePlanDescription>

        <PricingTableAction variant="outline">
          Contact Sales
        </PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>

    <PricingTableBody>
      <PricingTableFeatureLabel>
        Usage
      </PricingTableFeatureLabel>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Projects
        </PricingTableFeatureCell>

        <PricingTableCell value="3" />

        <PricingTableCell value="Unlimited" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Team members
        </PricingTableFeatureCell>

        <PricingTableCell value="1" />

        <PricingTableCell value="10" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Storage
        </PricingTableFeatureCell>

        <PricingTableCell value="1 GB" />

        <PricingTableCell value="100 GB" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableFeatureLabel>
        Features
      </PricingTableFeatureLabel>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Analytics
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Custom domains
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          API access
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value="partial" highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Priority support
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={false} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          SSO
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={false} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/pricing-table.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/pricing-table.tsx"
    import { cva, type VariantProps } from "class-variance-authority";
    import { Check, Minus, X } from "lucide-react";
    import * as React from "react";
    import { Button } from "@/components/ui/button";
    import { cn } from "@/lib/utils";

    // ... component code
    ```
  </Tab>
</Tabs>

## Examples

### Compact (2 Plans)

Use 3 columns for a compact table with 2 plans.

<ComponentPreview
  component="pricing-table"
  example="compact"
  code={`<PricingTable className="max-w-3xl">
    <PricingTableHeader columns={3}>
      <PricingTableSpacer />
      <PricingTablePlan>
        <PricingTablePlanName>Starter</PricingTablePlanName>
        <PricingTablePrice amount={9} />
        <PricingTableAction variant="outline" size="sm">Select</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan highlighted>
        <PricingTablePlanName>Pro</PricingTablePlanName>
        <PricingTablePrice amount={29} />
        <PricingTableAction size="sm">Select</PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>
    <PricingTableBody>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>API calls</PricingTableFeatureCell>
        <PricingTableCell value="1,000/mo" />
        <PricingTableCell value="100,000/mo" highlighted />
      </PricingTableRow>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>Webhooks</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
      </PricingTableRow>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>Support</PricingTableFeatureCell>
        <PricingTableCell value="Email" />
        <PricingTableCell value="Priority" highlighted />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>`}
>
  <PricingTable className="max-w-3xl">
    <PricingTableHeader columns={3}>
      <PricingTableSpacer />

      <PricingTablePlan>
        <PricingTablePlanName>
          Starter
        </PricingTablePlanName>

        <PricingTablePrice amount={9} />

        <PricingTableAction variant="outline" size="sm">
          Select
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan highlighted>
        <PricingTablePlanName>
          Pro
        </PricingTablePlanName>

        <PricingTablePrice amount={29} />

        <PricingTableAction size="sm">
          Select
        </PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>

    <PricingTableBody>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>
          API calls
        </PricingTableFeatureCell>

        <PricingTableCell value="1,000/mo" />

        <PricingTableCell value="100,000/mo" highlighted />
      </PricingTableRow>

      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>
          Webhooks
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />
      </PricingTableRow>

      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>
          Support
        </PricingTableFeatureCell>

        <PricingTableCell value="Email" />

        <PricingTableCell value="Priority" highlighted />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>
</ComponentPreview>

### Yearly Pricing

Use `period="year"` for annual billing with the elevated variant.

<ComponentPreview
  component="pricing-table"
  example="yearly"
  code={`<PricingTable variant="elevated" className="max-w-4xl">
    <PricingTableHeader columns={4}>
      <PricingTableSpacer />
      <PricingTablePlan>
        <PricingTablePlanName>Basic</PricingTablePlanName>
        <PricingTablePrice amount={79} period="year" />
        <PricingTablePlanDescription>$6.58/mo billed yearly</PricingTablePlanDescription>
        <PricingTableAction variant="outline">Choose Basic</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan highlighted>
        <PricingTablePlanName>Professional</PricingTablePlanName>
        <PricingTablePrice amount={279} period="year" />
        <PricingTablePlanDescription>$23.25/mo billed yearly</PricingTablePlanDescription>
        <PricingTableAction>Choose Pro</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan>
        <PricingTablePlanName>Business</PricingTablePlanName>
        <PricingTablePrice amount={599} period="year" />
        <PricingTablePlanDescription>$49.92/mo billed yearly</PricingTablePlanDescription>
        <PricingTableAction variant="outline">Choose Business</PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>
    <PricingTableBody>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Seats included</PricingTableFeatureCell>
        <PricingTableCell value="1" />
        <PricingTableCell value="5" highlighted />
        <PricingTableCell value="20" />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Projects</PricingTableFeatureCell>
        <PricingTableCell value="5" />
        <PricingTableCell value="Unlimited" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Advanced reports</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Audit logs</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={false} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>`}
>
  <PricingTable variant="elevated" className="max-w-4xl">
    <PricingTableHeader columns={4}>
      <PricingTableSpacer />

      <PricingTablePlan>
        <PricingTablePlanName>
          Basic
        </PricingTablePlanName>

        <PricingTablePrice amount={79} period="year" />

        <PricingTablePlanDescription>
          $6.58/mo billed yearly
        </PricingTablePlanDescription>

        <PricingTableAction variant="outline">
          Choose Basic
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan highlighted>
        <PricingTablePlanName>
          Professional
        </PricingTablePlanName>

        <PricingTablePrice amount={279} period="year" />

        <PricingTablePlanDescription>
          $23.25/mo billed yearly
        </PricingTablePlanDescription>

        <PricingTableAction>
          Choose Pro
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan>
        <PricingTablePlanName>
          Business
        </PricingTablePlanName>

        <PricingTablePrice amount={599} period="year" />

        <PricingTablePlanDescription>
          $49.92/mo billed yearly
        </PricingTablePlanDescription>

        <PricingTableAction variant="outline">
          Choose Business
        </PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>

    <PricingTableBody>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Seats included
        </PricingTableFeatureCell>

        <PricingTableCell value="1" />

        <PricingTableCell value="5" highlighted />

        <PricingTableCell value="20" />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Projects
        </PricingTableFeatureCell>

        <PricingTableCell value="5" />

        <PricingTableCell value="Unlimited" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Advanced reports
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Audit logs
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={false} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>
</ComponentPreview>

### Expanded (4 Plans)

Use 5 columns for comparing more plans.

<ComponentPreview
  component="pricing-table"
  example="expanded"
  code={`<PricingTable className="max-w-5xl">
    <PricingTableHeader columns={5}>
      <PricingTableSpacer />
      <PricingTablePlan>
        <PricingTablePlanName>Free</PricingTablePlanName>
        <PricingTablePrice amount={0} />
        <PricingTableAction variant="outline" size="sm">Start Free</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan>
        <PricingTablePlanName>Starter</PricingTablePlanName>
        <PricingTablePrice amount={19} />
        <PricingTableAction variant="outline" size="sm">Get Started</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan highlighted>
        <PricingTablePlanName>Pro</PricingTablePlanName>
        <PricingTablePrice amount={49} />
        <PricingTableAction size="sm">Start Trial</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan>
        <PricingTablePlanName>Enterprise</PricingTablePlanName>
        <PricingTablePrice amount={199} />
        <PricingTableAction variant="outline" size="sm">Contact Sales</PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>
    <PricingTableBody>
      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>Users</PricingTableFeatureCell>
        <PricingTableCell value="1" />
        <PricingTableCell value="5" />
        <PricingTableCell value="25" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>Storage</PricingTableFeatureCell>
        <PricingTableCell value="500 MB" />
        <PricingTableCell value="10 GB" />
        <PricingTableCell value="100 GB" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>Custom branding</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>Dedicated support</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={false} />
        <PricingTableCell value="partial" highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>`}
>
  <PricingTable className="max-w-5xl">
    <PricingTableHeader columns={5}>
      <PricingTableSpacer />

      <PricingTablePlan>
        <PricingTablePlanName>
          Free
        </PricingTablePlanName>

        <PricingTablePrice amount={0} />

        <PricingTableAction variant="outline" size="sm">
          Start Free
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan>
        <PricingTablePlanName>
          Starter
        </PricingTablePlanName>

        <PricingTablePrice amount={19} />

        <PricingTableAction variant="outline" size="sm">
          Get Started
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan highlighted>
        <PricingTablePlanName>
          Pro
        </PricingTablePlanName>

        <PricingTablePrice amount={49} />

        <PricingTableAction size="sm">
          Start Trial
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan>
        <PricingTablePlanName>
          Enterprise
        </PricingTablePlanName>

        <PricingTablePrice amount={199} />

        <PricingTableAction variant="outline" size="sm">
          Contact Sales
        </PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>

    <PricingTableBody>
      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>
          Users
        </PricingTableFeatureCell>

        <PricingTableCell value="1" />

        <PricingTableCell value="5" />

        <PricingTableCell value="25" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>
          Storage
        </PricingTableFeatureCell>

        <PricingTableCell value="500 MB" />

        <PricingTableCell value="10 GB" />

        <PricingTableCell value="100 GB" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>
          Custom branding
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={5}>
        <PricingTableFeatureCell>
          Dedicated support
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={false} />

        <PricingTableCell value="partial" highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>
</ComponentPreview>

### One-time Pricing

Use `period="once"` for one-time purchase pricing.

<ComponentPreview
  component="pricing-table"
  example="once"
  code={`<PricingTable className="max-w-3xl">
    <PricingTableHeader columns={3}>
      <PricingTableSpacer />
      <PricingTablePlan>
        <PricingTablePlanName>Standard</PricingTablePlanName>
        <PricingTablePrice amount={99} period="once" />
        <PricingTablePlanDescription>One-time payment</PricingTablePlanDescription>
        <PricingTableAction variant="outline">Buy Now</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan highlighted>
        <PricingTablePlanName>Extended</PricingTablePlanName>
        <PricingTablePrice amount={249} period="once" />
        <PricingTablePlanDescription>Lifetime access</PricingTablePlanDescription>
        <PricingTableAction>Buy Now</PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>
    <PricingTableBody>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>License type</PricingTableFeatureCell>
        <PricingTableCell value="Single site" />
        <PricingTableCell value="Unlimited sites" highlighted />
      </PricingTableRow>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>Updates</PricingTableFeatureCell>
        <PricingTableCell value="1 year" />
        <PricingTableCell value="Lifetime" highlighted />
      </PricingTableRow>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>Premium support</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>`}
>
  <PricingTable className="max-w-3xl">
    <PricingTableHeader columns={3}>
      <PricingTableSpacer />

      <PricingTablePlan>
        <PricingTablePlanName>
          Standard
        </PricingTablePlanName>

        <PricingTablePrice amount={99} period="once" />

        <PricingTablePlanDescription>
          One-time payment
        </PricingTablePlanDescription>

        <PricingTableAction variant="outline">
          Buy Now
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan highlighted>
        <PricingTablePlanName>
          Extended
        </PricingTablePlanName>

        <PricingTablePrice amount={249} period="once" />

        <PricingTablePlanDescription>
          Lifetime access
        </PricingTablePlanDescription>

        <PricingTableAction>
          Buy Now
        </PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>

    <PricingTableBody>
      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>
          License type
        </PricingTableFeatureCell>

        <PricingTableCell value="Single site" />

        <PricingTableCell value="Unlimited sites" highlighted />
      </PricingTableRow>

      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>
          Updates
        </PricingTableFeatureCell>

        <PricingTableCell value="1 year" />

        <PricingTableCell value="Lifetime" highlighted />
      </PricingTableRow>

      <PricingTableRow columns={3}>
        <PricingTableFeatureCell>
          Premium support
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>
</ComponentPreview>

### With Feature Sections

Group features using `PricingTableFeatureLabel` for better organization.

<ComponentPreview
  component="pricing-table"
  example="sections"
  code={`<PricingTable variant="elevated" className="max-w-4xl">
    <PricingTableHeader columns={4}>
      <PricingTableSpacer />
      <PricingTablePlan>
        <PricingTablePlanName>Hobby</PricingTablePlanName>
        <PricingTablePrice amount={0} />
        <PricingTableAction variant="outline">Start Free</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan highlighted>
        <PricingTablePlanName>Team</PricingTablePlanName>
        <PricingTablePrice amount={39} />
        <PricingTableAction>Start Trial</PricingTableAction>
      </PricingTablePlan>
      <PricingTablePlan>
        <PricingTablePlanName>Enterprise</PricingTablePlanName>
        <PricingTablePrice amount={149} />
        <PricingTableAction variant="outline">Contact Us</PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>
    <PricingTableBody>
      <PricingTableFeatureLabel>Core Features</PricingTableFeatureLabel>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Workspaces</PricingTableFeatureCell>
        <PricingTableCell value="1" />
        <PricingTableCell value="5" highlighted />
        <PricingTableCell value="Unlimited" />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>File storage</PricingTableFeatureCell>
        <PricingTableCell value="1 GB" />
        <PricingTableCell value="50 GB" highlighted />
        <PricingTableCell value="500 GB" />
      </PricingTableRow>
      <PricingTableFeatureLabel>Collaboration</PricingTableFeatureLabel>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Real-time editing</PricingTableFeatureCell>
        <PricingTableCell value={true} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>Guest access</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableFeatureLabel>Security</PricingTableFeatureLabel>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>2FA</PricingTableFeatureCell>
        <PricingTableCell value={true} />
        <PricingTableCell value={true} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>SAML SSO</PricingTableFeatureCell>
        <PricingTableCell value={false} />
        <PricingTableCell value={false} highlighted />
        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>`}
>
  <PricingTable variant="elevated" className="max-w-4xl">
    <PricingTableHeader columns={4}>
      <PricingTableSpacer />

      <PricingTablePlan>
        <PricingTablePlanName>
          Hobby
        </PricingTablePlanName>

        <PricingTablePrice amount={0} />

        <PricingTableAction variant="outline">
          Start Free
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan highlighted>
        <PricingTablePlanName>
          Team
        </PricingTablePlanName>

        <PricingTablePrice amount={39} />

        <PricingTableAction>
          Start Trial
        </PricingTableAction>
      </PricingTablePlan>

      <PricingTablePlan>
        <PricingTablePlanName>
          Enterprise
        </PricingTablePlanName>

        <PricingTablePrice amount={149} />

        <PricingTableAction variant="outline">
          Contact Us
        </PricingTableAction>
      </PricingTablePlan>
    </PricingTableHeader>

    <PricingTableBody>
      <PricingTableFeatureLabel>
        Core Features
      </PricingTableFeatureLabel>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Workspaces
        </PricingTableFeatureCell>

        <PricingTableCell value="1" />

        <PricingTableCell value="5" highlighted />

        <PricingTableCell value="Unlimited" />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          File storage
        </PricingTableFeatureCell>

        <PricingTableCell value="1 GB" />

        <PricingTableCell value="50 GB" highlighted />

        <PricingTableCell value="500 GB" />
      </PricingTableRow>

      <PricingTableFeatureLabel>
        Collaboration
      </PricingTableFeatureLabel>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Real-time editing
        </PricingTableFeatureCell>

        <PricingTableCell value={true} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          Guest access
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableFeatureLabel>
        Security
      </PricingTableFeatureLabel>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          2FA
        </PricingTableFeatureCell>

        <PricingTableCell value={true} />

        <PricingTableCell value={true} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>

      <PricingTableRow columns={4}>
        <PricingTableFeatureCell>
          SAML SSO
        </PricingTableFeatureCell>

        <PricingTableCell value={false} />

        <PricingTableCell value={false} highlighted />

        <PricingTableCell value={true} />
      </PricingTableRow>
    </PricingTableBody>
  </PricingTable>
</ComponentPreview>

## API Reference

### PricingTable

The root container component.

| Prop         | Type                      | Default                |
| ------------ | ------------------------- | ---------------------- |
| `variant`    | `"default" \| "elevated"` | `"default"`            |
| `aria-label` | `string`                  | `"Pricing comparison"` |

### PricingTableHeader

Container for plan headers. Must specify number of columns.

| Prop      | Type          | Default |
| --------- | ------------- | ------- |
| `columns` | `3 \| 4 \| 5` | `4`     |

### PricingTablePlan

Individual plan column header.

| Prop          | Type      | Default |
| ------------- | --------- | ------- |
| `highlighted` | `boolean` | `false` |

### PricingTablePlanName

The plan name heading.

| Prop | Type                   | Default |
| ---- | ---------------------- | ------- |
| `as` | `"h2" \| "h3" \| "h4"` | `"h3"`  |

### PricingTablePrice

Displays the price with optional period indicator.

| Prop       | Type                          | Default   |
| ---------- | ----------------------------- | --------- |
| `amount`   | `number`                      | —         |
| `currency` | `string`                      | `"$"`     |
| `period`   | `"month" \| "year" \| "once"` | `"month"` |

### PricingTableAction

CTA button for the plan.

| Prop      | Type                                    | Default     |
| --------- | --------------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "secondary"` | `"default"` |
| `size`    | `"default" \| "sm" \| "lg"`             | `"default"` |

### PricingTableRow

A feature row. Must specify same number of columns as header.

| Prop      | Type          | Default |
| --------- | ------------- | ------- |
| `columns` | `3 \| 4 \| 5` | `4`     |

### PricingTableCell

Individual cell for feature values.

| Prop          | Type                             | Default |
| ------------- | -------------------------------- | ------- |
| `value`       | `boolean \| string \| "partial"` | —       |
| `highlighted` | `boolean`                        | `false` |

The `value` prop supports:

* `true` — Shows a check icon (✓)
* `false` — Shows an X icon (✗)
* `"partial"` — Shows a minus icon (−) for partial support
* `string` — Shows the text value

### PricingTableFeatureLabel

Section header for grouping features.

| Prop       | Type              | Default |
| ---------- | ----------------- | ------- |
| `children` | `React.ReactNode` | —       |

### PricingTableSpacer

Empty spacer cell for the header's first column (where feature names appear in rows).


# Usage Card



import {
  UsageCard,
  UsageCardHeader,
  UsageCardPeriod,
  UsageCardAction,
  UsageCardSummary,
  UsageCardLabels,
  UsageCardLabel,
  UsageCardProgress,
  UsageCardList,
  UsageCardItem,
  UsageCardItemLabel,
  UsageCardItemValue,
  UsageCardMeter,
  UsageCardTotal,
} from "@/registry/ui";

<ComponentPreview
  component="usage-card"
  example="preview"
  code={`<div className="w-full max-w-xl">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={12} />
        <UsageCardAction>Buy Credits</UsageCardAction>
      </UsageCardHeader>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Credits Used" amount={347} limit={500} currency="" />
          <UsageCardLabel label="Remaining" amount={153} currency="" align="right" />
        </UsageCardLabels>
        <UsageCardProgress value={347} max={500} />
      </UsageCardSummary>
      <UsageCardList collapsible dividers={false}>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>Image Generation</UsageCardItemLabel>
          <UsageCardItemValue>120 credits</UsageCardItemValue>
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Video Generation</UsageCardItemLabel>
          <UsageCardItemValue>85 credits</UsageCardItemValue>
        </UsageCardItem>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>Upscaling (4x)</UsageCardItemLabel>
          <UsageCardItemValue>62 credits</UsageCardItemValue>
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Background Removal</UsageCardItemLabel>
          <UsageCardItemValue>45 credits</UsageCardItemValue>
        </UsageCardItem>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>Style Transfer</UsageCardItemLabel>
          <UsageCardItemValue>35 credits</UsageCardItemValue>
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-xl">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={12} />

        <UsageCardAction>
          Buy Credits
        </UsageCardAction>
      </UsageCardHeader>

      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Credits Used" amount={347} limit={500} currency="" />

          <UsageCardLabel label="Remaining" amount={153} currency="" align="right" />
        </UsageCardLabels>

        <UsageCardProgress value={347} max={500} />
      </UsageCardSummary>

      <UsageCardList collapsible dividers={false}>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>
            Image Generation
          </UsageCardItemLabel>

          <UsageCardItemValue>
            120 credits
          </UsageCardItemValue>
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Video Generation
          </UsageCardItemLabel>

          <UsageCardItemValue>
            85 credits
          </UsageCardItemValue>
        </UsageCardItem>

        <UsageCardItem highlighted>
          <UsageCardItemLabel>
            Upscaling (4x)
          </UsageCardItemLabel>

          <UsageCardItemValue>
            62 credits
          </UsageCardItemValue>
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Background Removal
          </UsageCardItemLabel>

          <UsageCardItemValue>
            45 credits
          </UsageCardItemValue>
        </UsageCardItem>

        <UsageCardItem highlighted>
          <UsageCardItemLabel>
            Style Transfer
          </UsageCardItemLabel>

          <UsageCardItemValue>
            35 credits
          </UsageCardItemValue>
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>
</ComponentPreview>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add "https://billui.com/r/usage-card.json"
    ```
  </Tab>

  <Tab value="Manual">
    ```tsx title="components/ui/usage-card.tsx"
    "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
    ```
  </Tab>
</Tabs>

## Examples

### Basic Usage

Simple usage card with progress bar and itemized list.

<ComponentPreview
  component="usage-card"
  example="basic"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={14} />
      </UsageCardHeader>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Used" amount={12.50} limit={20} />
        </UsageCardLabels>
        <UsageCardProgress value={12.50} max={20} />
      </UsageCardSummary>
      <UsageCardList>
        <UsageCardItem>
          <UsageCardItemLabel>API Calls</UsageCardItemLabel>
          <UsageCardItemValue amount={8.50} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Storage</UsageCardItemLabel>
          <UsageCardItemValue amount={4.00} />
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={14} />
      </UsageCardHeader>

      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Used" amount={12.50} limit={20} />
        </UsageCardLabels>

        <UsageCardProgress value={12.50} max={20} />
      </UsageCardSummary>

      <UsageCardList>
        <UsageCardItem>
          <UsageCardItemLabel>
            API Calls
          </UsageCardItemLabel>

          <UsageCardItemValue amount={8.50} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Storage
          </UsageCardItemLabel>

          <UsageCardItemValue amount={4.00} />
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>
</ComponentPreview>

### Elevated Variant

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

<ComponentPreview
  component="usage-card"
  example="elevated"
  code={`<div className="w-full max-w-md">
    <UsageCard variant="elevated">
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={7} />
        <UsageCardAction>Upgrade</UsageCardAction>
      </UsageCardHeader>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Credits Used" amount={18.50} limit={20} />
          <UsageCardLabel label="On-Demand" amount={0} align="right" />
        </UsageCardLabels>
        <UsageCardProgress value={18.50} max={20} />
      </UsageCardSummary>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard variant="elevated">
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={7} />

        <UsageCardAction>
          Upgrade
        </UsageCardAction>
      </UsageCardHeader>

      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Credits Used" amount={18.50} limit={20} />

          <UsageCardLabel label="On-Demand" amount={0} align="right" />
        </UsageCardLabels>

        <UsageCardProgress value={18.50} max={20} />
      </UsageCardSummary>
    </UsageCard>
  </div>
</ComponentPreview>

### With Usage Meters

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

<ComponentPreview
  component="usage-card"
  example="meters"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={5} />
        <UsageCardAction>Manage</UsageCardAction>
      </UsageCardHeader>
      <div className="divide-y divide-border">
        <UsageCardMeter used={8500} limit={10000} label="API Requests" unit="req" showPercentage />
        <UsageCardMeter used={4.2} limit={5} label="Storage" unit="GB" showPercentage />
        <UsageCardMeter used={950} limit={1000} label="Bandwidth" unit="GB" showPercentage />
      </div>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={5} />

        <UsageCardAction>
          Manage
        </UsageCardAction>
      </UsageCardHeader>

      <div className="divide-y divide-border">
        <UsageCardMeter used={8500} limit={10000} label="API Requests" unit="req" showPercentage />

        <UsageCardMeter used={4.2} limit={5} label="Storage" unit="GB" showPercentage />

        <UsageCardMeter used={950} limit={1000} label="Bandwidth" unit="GB" showPercentage />
      </div>
    </UsageCard>
  </div>
</ComponentPreview>

### Collapsible List

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

<ComponentPreview
  component="usage-card"
  example="collapsible"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={3} />
      </UsageCardHeader>
      <UsageCardList collapsible>
        <UsageCardItem>
          <UsageCardItemLabel>Build Minutes</UsageCardItemLabel>
          <UsageCardItemValue amount={4.02} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Edge Invocations</UsageCardItemLabel>
          <UsageCardItemValue amount={0.65} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Function Calls</UsageCardItemLabel>
          <UsageCardItemValue amount={0.60} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Bandwidth</UsageCardItemLabel>
          <UsageCardItemValue amount={0.34} />
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={3} />
      </UsageCardHeader>

      <UsageCardList collapsible>
        <UsageCardItem>
          <UsageCardItemLabel>
            Build Minutes
          </UsageCardItemLabel>

          <UsageCardItemValue amount={4.02} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Edge Invocations
          </UsageCardItemLabel>

          <UsageCardItemValue amount={0.65} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Function Calls
          </UsageCardItemLabel>

          <UsageCardItemValue amount={0.60} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Bandwidth
          </UsageCardItemLabel>

          <UsageCardItemValue amount={0.34} />
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>
</ComponentPreview>

### With Highlighted Items

Use `highlighted` prop on items to create zebra striping.

<ComponentPreview
  component="usage-card"
  example="highlighted"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardList dividers={false}>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>Compute</UsageCardItemLabel>
          <UsageCardItemValue amount={12.50} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Storage</UsageCardItemLabel>
          <UsageCardItemValue amount={5.00} />
        </UsageCardItem>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>Bandwidth</UsageCardItemLabel>
          <UsageCardItemValue amount={2.50} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Functions</UsageCardItemLabel>
          <UsageCardItemValue amount={1.25} />
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardList dividers={false}>
        <UsageCardItem highlighted>
          <UsageCardItemLabel>
            Compute
          </UsageCardItemLabel>

          <UsageCardItemValue amount={12.50} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Storage
          </UsageCardItemLabel>

          <UsageCardItemValue amount={5.00} />
        </UsageCardItem>

        <UsageCardItem highlighted>
          <UsageCardItemLabel>
            Bandwidth
          </UsageCardItemLabel>

          <UsageCardItemValue amount={2.50} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Functions
          </UsageCardItemLabel>

          <UsageCardItemValue amount={1.25} />
        </UsageCardItem>
      </UsageCardList>
    </UsageCard>
  </div>
</ComponentPreview>

### With Total Row

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

<ComponentPreview
  component="usage-card"
  example="total"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={2} />
      </UsageCardHeader>
      <UsageCardList>
        <UsageCardItem>
          <UsageCardItemLabel>Pro Plan</UsageCardItemLabel>
          <UsageCardItemValue amount={29.00} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Extra Seats (3)</UsageCardItemLabel>
          <UsageCardItemValue amount={45.00} />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Storage Add-on</UsageCardItemLabel>
          <UsageCardItemValue amount={10.00} />
        </UsageCardItem>
      </UsageCardList>
      <UsageCardTotal amount={84.00} />
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod daysRemaining={2} />
      </UsageCardHeader>

      <UsageCardList>
        <UsageCardItem>
          <UsageCardItemLabel>
            Pro Plan
          </UsageCardItemLabel>

          <UsageCardItemValue amount={29.00} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Extra Seats (3)
          </UsageCardItemLabel>

          <UsageCardItemValue amount={45.00} />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Storage Add-on
          </UsageCardItemLabel>

          <UsageCardItemValue amount={10.00} />
        </UsageCardItem>
      </UsageCardList>

      <UsageCardTotal amount={84.00} />
    </UsageCard>
  </div>
</ComponentPreview>

### Overage Warning

The progress bar turns red when usage exceeds the limit.

<ComponentPreview
  component="usage-card"
  example="overage"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod>Billing cycle exceeded</UsageCardPeriod>
        <UsageCardAction>Add Credits</UsageCardAction>
      </UsageCardHeader>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Used" amount={28.50} limit={20} />
          <UsageCardLabel label="Overage" amount={8.50} align="right" />
        </UsageCardLabels>
        <UsageCardProgress value={28.50} max={20} />
      </UsageCardSummary>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod>
          Billing cycle exceeded
        </UsageCardPeriod>

        <UsageCardAction>
          Add Credits
        </UsageCardAction>
      </UsageCardHeader>

      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Used" amount={28.50} limit={20} />

          <UsageCardLabel label="Overage" amount={8.50} align="right" />
        </UsageCardLabels>

        <UsageCardProgress value={28.50} max={20} />
      </UsageCardSummary>
    </UsageCard>
  </div>
</ComponentPreview>

### Custom Currency

Display amounts in different currencies.

<ComponentPreview
  component="usage-card"
  example="currency"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Créditos Usados" amount={15.00} limit={50} currency="€" />
          <UsageCardLabel label="Adicional" amount={0} currency="€" align="right" />
        </UsageCardLabels>
        <UsageCardProgress value={15} max={50} />
      </UsageCardSummary>
      <UsageCardList>
        <UsageCardItem>
          <UsageCardItemLabel>Almacenamiento</UsageCardItemLabel>
          <UsageCardItemValue amount={10.00} currency="€" />
        </UsageCardItem>
        <UsageCardItem>
          <UsageCardItemLabel>Transferencia</UsageCardItemLabel>
          <UsageCardItemValue amount={5.00} currency="€" />
        </UsageCardItem>
      </UsageCardList>
      <UsageCardTotal amount={15.00} currency="€" />
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Créditos Usados" amount={15.00} limit={50} currency="€" />

          <UsageCardLabel label="Adicional" amount={0} currency="€" align="right" />
        </UsageCardLabels>

        <UsageCardProgress value={15} max={50} />
      </UsageCardSummary>

      <UsageCardList>
        <UsageCardItem>
          <UsageCardItemLabel>
            Almacenamiento
          </UsageCardItemLabel>

          <UsageCardItemValue amount={10.00} currency="€" />
        </UsageCardItem>

        <UsageCardItem>
          <UsageCardItemLabel>
            Transferencia
          </UsageCardItemLabel>

          <UsageCardItemValue amount={5.00} currency="€" />
        </UsageCardItem>
      </UsageCardList>

      <UsageCardTotal amount={15.00} currency="€" />
    </UsageCard>
  </div>
</ComponentPreview>

### Custom Period Text

Pass custom children to `UsageCardPeriod` for custom text.

<ComponentPreview
  component="usage-card"
  example="custom-period"
  code={`<div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod>Jan 1 - Jan 31, 2024</UsageCardPeriod>
        <UsageCardAction>View History</UsageCardAction>
      </UsageCardHeader>
      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Total Used" amount={45.00} />
        </UsageCardLabels>
      </UsageCardSummary>
    </UsageCard>
  </div>`}
>
  <div className="w-full max-w-md">
    <UsageCard>
      <UsageCardHeader>
        <UsageCardPeriod>
          Jan 1 - Jan 31, 2024
        </UsageCardPeriod>

        <UsageCardAction>
          View History
        </UsageCardAction>
      </UsageCardHeader>

      <UsageCardSummary>
        <UsageCardLabels>
          <UsageCardLabel label="Total Used" amount={45.00} />
        </UsageCardLabels>
      </UsageCardSummary>
    </UsageCard>
  </div>
</ComponentPreview>

## API Reference

### UsageCard

The root container component.

| Prop      | Type                      | Default     |
| --------- | ------------------------- | ----------- |
| `variant` | `"default" \| "elevated"` | `"default"` |

### UsageCardPeriod

Displays the billing period or days remaining.

| Prop            | Type     | Default |
| --------------- | -------- | ------- |
| `daysRemaining` | `number` | —       |

### UsageCardAction

Action button in the header.

| Prop      | Type                                | Default     |
| --------- | ----------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "ghost"` | `"outline"` |

### UsageCardLabel

Displays a labeled amount with optional limit.

| Prop       | Type                | Default  |
| ---------- | ------------------- | -------- |
| `label`    | `string`            | —        |
| `amount`   | `number`            | —        |
| `limit`    | `number`            | —        |
| `currency` | `string`            | `"$"`    |
| `align`    | `"left" \| "right"` | `"left"` |

### UsageCardProgress

Progress bar showing usage against a limit.

| Prop          | Type      | Default |
| ------------- | --------- | ------- |
| `value`       | `number`  | —       |
| `max`         | `number`  | `100`   |
| `showOverage` | `boolean` | `false` |

### UsageCardList

Container for usage items with optional collapsing.

| Prop              | Type      | Default |
| ----------------- | --------- | ------- |
| `collapsible`     | `boolean` | `false` |
| `defaultExpanded` | `boolean` | `false` |
| `collapsedHeight` | `number`  | `88`    |
| `dividers`        | `boolean` | `true`  |

### UsageCardItem

Individual usage line item.

| Prop          | Type      | Default |
| ------------- | --------- | ------- |
| `highlighted` | `boolean` | `false` |

### UsageCardItemValue

Value display for a usage item.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `amount`   | `number` | —       |
| `currency` | `string` | `"$"`   |
| `unit`     | `string` | —       |

### UsageCardMeter

Visual meter showing resource usage with warning states.

| Prop             | Type      | Default |
| ---------------- | --------- | ------- |
| `used`           | `number`  | —       |
| `limit`          | `number`  | —       |
| `label`          | `string`  | —       |
| `unit`           | `string`  | —       |
| `showPercentage` | `boolean` | `false` |

### UsageCardTotal

Total row at the bottom of the card.

| Prop       | Type     | Default   |
| ---------- | -------- | --------- |
| `label`    | `string` | `"Total"` |
| `amount`   | `number` | —         |
| `currency` | `string` | `"$"`     |

### useUsageCardList

Hook to access the list expansion state from child components.

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