Overview

A token counter component with progress bar visualization and color-coded states (normal, warning, danger). Shows current token usage against model limits.

Installation

bunx shadcn@latest add @elements/token-counter

Usage

import { TokenCounter } from "@/components/elements/ai-elements/chat/token-counter";

export function TokenUsage() {
  return (
    <TokenCounter
      tokens={2500}
      maxTokens={4096}
      model="gpt-4"
      showProgress
    />
  );
}

Props

Color States

• Normal (0-60%): Default color
• Warning (60-90%): Yellow/amber
• Danger (90-100%): Red

Features

• Progress bar visualization
• Color-coded usage states
• Model name display
• Preset model limits
• Percentage calculation