Context Window

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the component.

   npx shadcn@latest add @txbrendan/context-window

Props

• parts

  Required. What fills the window, in the order the bar shows them. Five at most.

  { id?: string; label: string; tokens: number; action?: ContextWindowPartAction }[]

• ContextWindowPartAction

  Type. A quiet button at the end of the part's legend row. Pass functions from a client component.

  { label: string; onClick?: () => void; loading?: boolean; disabled?: boolean }

• limit

  Required. The window's size in tokens, like 200000.

  number

• title

  The card's title. It names the meter.

  ReactNode · default "Context window"

• model

  A small tag beside the title, like the model's name.

  ReactNode

• warnAt

  The share of the limit, from 0 to 1, where it turns warning. It turns danger once full.

  number · default 0.8

• tone

  Colors the percent and the last line. Left out, it is neutral, then warning from warnAt, then danger once full. Passed, it stays that tone.

  "neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"

• legend

  Shows each part's name, tokens, and action under the bar.

  boolean · default true

• action

  A button in the last row, like Compact chat or New chat.

  ReactNode

• loading

  Shows placeholders while the numbers load.

  boolean · default false

• size

  Bar height and the number's size.

  "sm" | "md" · default "md"

• locale

  Formats the numbers the short way, like 84K.

  string · default "en-US"

• className

  Classes for the card. Later classes win.

  string

Accessibility

• The card is a group named by the title. The bar is a meter with the same name, and reads like "84K of 200K tokens used, 42%".
• The bar's colored parts are hidden from screen readers. The legend says each part's name and tokens in text.
• A part's action is named with the part, like "Remove Files", so each button says what it acts on.
• Near the limit, the last line says Almost full or Full in words, so the warning does not rest on color alone.
• In forced-colors mode the bar draws a border and its parts fill with the text color.

Examples

<ContextWindow
  model="claude-opus-5-5"
  limit={200000}
  parts={[
    { label: "System prompt", tokens: 4200 },
    { label: "Tools", tokens: 12800 },
    { label: "Files", tokens: 31000 },
    { label: "Chat", tokens: 36000 },
  ]}
/>

import { Button } from "@/components/ui/button";
import { ContextWindow } from "@/components/ui/context-window";

export function SessionMeter() {
  return (
    <ContextWindow
      limit={200000}
      parts={[
        { label: "Files", tokens: 46100 },
        { label: "Chat", tokens: 129700 },
      ]}
      action={
        <Button size="sm" emphasis="outline">
          Compact chat
        </Button>
      }
    />
  );
}