Token Counter

Shows character length, a min–max token range (code vs prose heuristic), optional max-token warning, configurable per-model cost hints, and a built-in model switcher (internal state by default; pass `onModelChange` to control from the parent).

Default

Live stats under a prompt field with built-in model switcher (uncontrolled).

Prompt

134 chars39–54 tokens

Model

$0.00001–$0.00001

default-example.tsx

1"use client";
2
3import { useState } from "react";
4import { TokenCounter } from "@/registry/ui";
5import { Textarea } from "@/components/ui/textarea";
6import { Label } from "@/components/ui/label";
7
8export function TokenCounterDefaultExample() {
9  const [value, setValue] = useState(
10    "Paste or type a prompt here. Token count uses a min–max range (tighter for code-like text); use the model switcher to compare pricing.",
11  );
12
13  return (
14    <div className="mx-auto w-full max-w-2xl space-y-3">
15      <div className="space-y-2">
16        <Label htmlFor="token-counter-demo">Prompt</Label>
17        <Textarea
18          id="token-counter-demo"
19          value={value}
20          onChange={(e) => setValue(e.target.value)}
21          rows={6}
22          className="font-mono text-sm"
23        />
24      </div>
25      <TokenCounter value={value} />
26    </div>
27  );
28}

With limit

Highlights when the max token estimate exceeds `maxTokens`; default model `gpt-4o`.

Text (max ~100 tokens)

400 chars89–115 tokens/ 100

Model

$0.00044–$0.00057

with-limit-example.tsx

1"use client";
2
3import { useState } from "react";
4import { TokenCounter } from "@/registry/ui";
5import { Textarea } from "@/components/ui/textarea";
6import { Label } from "@/components/ui/label";
7
8export function TokenCounterWithLimitExample() {
9  const [value, setValue] = useState("x".repeat(400));
10
11  return (
12    <div className="mx-auto w-full max-w-2xl space-y-3">
13      <div className="space-y-2">
14        <Label htmlFor="token-counter-limit">Text (max ~100 tokens)</Label>
15        <Textarea
16          id="token-counter-limit"
17          value={value}
18          onChange={(e) => setValue(e.target.value)}
19          rows={5}
20          className="font-mono text-sm"
21        />
22      </div>
23      <TokenCounter value={value} model="gpt-4o" maxTokens={100} />
24    </div>
25  );
26}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/token-counter

Props

Name	Type	Default	Description
value	string	""	Text to measure (typically bound to a textarea)
model	string	"gpt-4o-mini"	Key into the pricing map
models	Record<string, { input: number; output?: number }>	Built-in defaults	Per-1k-token input (and optional output) rates in USD
onModelChange	(model: string) => void	undefined	Optional. With `model`, lifts selection to the parent (controlled). When omitted, the switcher still shows and state stays inside `TokenCounter`.
maxTokens	number	undefined	When set, token range turns red if max estimate exceeds limit
className	string	undefined	Extra classes on the outer strip