Character counter
Character or token budget for the composer, with soft and hard limits, a ring variant and announcements only at thresholds.
On this page
Soft and hard limits as text and as a ring.
Installation
Usage
import { CharacterCounter, getCounterState } from "@/components/ui/chatcn/character-counter"
<CharacterCounter value={text} limit={4000} />
<PromptInputSubmit disabled={getCounterState(text.length, 4000) === "over"} />Examples
Token estimate
Approximate token counts with an optional budget.
Props
| Prop | Type | Notes |
|---|---|---|
value | string | Counted by grapheme, so emoji and accents count once |
count | number | Your own count. Wins over value |
limit | number | Hard limit |
softLimit | number | Warning starts here. Default 90% of limit |
mode | "characters" | "tokens" | Tokens estimate about four characters each |
estimate | (text) => number | Your tokenizer |
variant | "text" | "ring" | Ring shows the number only near the limit |
hideBelow | number | Stay hidden for short messages |
Accessibility
- Screen readers hear it only when it crosses a threshold: 28 characters left, then 17 characters over the limit, shorten the message to send it.
- Past the limit the color change comes with the overage in words.
- Numbers are tabular so the width never jitters while typing.
Motion
- Color changes over 150 ms; the ring fills linearly. Reduced motion snaps the ring.