Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Token split

Shows how a model reads a piece of text. Split it and the words come apart into tokens, each with its own tint, with leading spaces shown as a faint dot and the token count beside the characters.

Pro
pnpm dlx shadcn@latest add @caliper/token-split

Prompt

See how the model reads it.

Summarise the attached quarterly report in three bullet points, highlighting unexpected churn.

20tokens · 94 characters

Installs components/ui/token-split.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

  • Prompt editors, playgrounds and cost estimators.
  • Teaching what a token is.

Skip it when

  • Exact billing; pass your tokenizer's real output, or show counts from the API.
  • Very long documents; split a paragraph at a time.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Rough, then real
roughTokens is a close stand-in for English prose; pass tokens from your tokenizer and the view stays the same.

Styling

Tints in a cycle
Five calm hues repeat in order, so neighbouring tokens always differ and long text does not turn into a rainbow.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/token-split

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from TokenSplit and roughTokens.

example.tsx
import { TokenSplit, roughTokens } from "@/components/ui/token-split"

The worked example comes with Pro

The 26-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

TokenSplit

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
text *string—
tokensstring[]—The tokens, if you have the real ones; they must join back into `text`.
defaultSplitbooleanfalseStarts split into tokens.

roughTokens

component

No props of its own; it accepts the native props of its root element.

Accessibility

It is built on native elements and keeps aria-pressed in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Text motion examples