Context

How much of the context window is spent, as a meter with the breakdown on hover.

1'use client';
2
3import { Context } from '@/components/ui/context';
4
5export function Default() {
6  return (
7    <div className="flex w-full justify-center py-8">
8      <Context maxTokens={200000} usedTokens={84320}>
9        <Context.Trigger />
10        <Context.Content align="center">
11          <Context.Header />
12          <Context.Body>
13            <Context.Usage label="Input" tokens={61200} />
14            <Context.Usage label="Output" tokens={14100} tone="info" />
15            <Context.Usage label="Reasoning" tokens={6800} tone="warning" />
16            <Context.Usage label="Cached" tokens={2220} tone="success" />
17          </Context.Body>
18          <Context.Footer>Costs are estimated from the model pricing you configure.</Context.Footer>
19        </Context.Content>
20      </Context>
21    </div>
22  );
23}

Installation

pnpm dlx nachui add context

Anatomy

1import { Context } from '@/components/ui/context';

1<Context maxTokens={200000} usedTokens={84320}>
2  <Context.Trigger />
3  <Context.Content>
4    <Context.Header />
5    <Context.Body>
6      <Context.Usage label="Input" tokens={61200} />
7      <Context.Usage label="Output" tokens={14100} tone="info" />
8    </Context.Body>
9    <Context.Footer>Estimated from your model pricing.</Context.Footer>
10  </Context.Content>
11</Context>

The trigger is a ring that fills as the window does, with the percentage beside it. The panel opens on hover and on focus, and clicking pins it open for keyboard and touch.

Composition

Use the following composition to build a Context:

Context
├── Context.Trigger
└── Context.Content
    ├── Context.Header
    ├── Context.Body
    │   └── Context.Usage
    └── Context.Footer

Usage rows

Context.Usage is deliberately generic. It takes a label, an optional tokens count and a tone for the dot, so you name the buckets your provider reports rather than inheriting somebody else's. Input, output, reasoning and cached is a good default set.

Both Header and Usage render sensible content when you give them no children, and any children you do pass replace it completely.

API Reference

Context

Prop	Type	Default	Description
`maxTokens`	`number`	-	Size of the context window
`usedTokens`	`number`	-	Tokens spent so far
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Called when the open state changes
`className`	`string`	-	Additional CSS classes

Context.Content

Prop	Type	Default	Description
`side`	`'top' \| 'bottom'`	`'bottom'`	Edge the panel opens from
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Horizontal anchor
`className`	`string`	-	Additional CSS classes

Context.Usage

Prop	Type	Default	Description
`label`	`ReactNode`	-	Name of the bucket
`tokens`	`number`	-	Count shown on the right
`tone`	`'default' \| 'muted' \| 'success' \| 'info' \| 'warning'`	`'default'`	Colour of the dot
`className`	`string`	-	Additional CSS classes

Context.Trigger / Context.Header / Context.Body / Context.Footer

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousChain of Thought

NextPrompt Input