81 Pro components and page blocks

Get Pro
uibrik

Context Meter

Pro

Preview

Customize

Pill
Usage62%
Warn at0.80
Critical at0.95
Tokens per message2500
Color

Installation

Pro

Context Meter is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/context-meter

Usage

import { ContextMeter } from "@/components/uibrik/context-meter/context-meter";​<ContextMeter  sources={[{ id: …, label: …, tokens: … }]}  limit={200_000}  variant="popover"  defaultOpen  warnAt={0.8}  criticalAt={0.95}  label="Context"  model="Claude Opus"  tokensPerMessage={2500}  color="#5b7bd6"  compactLabel="Compact"  side="bottom"  onCompact={() => {}}  // compactFrees={0}  // compactSource="…"  // open={false}  // onOpenChange={(open) => {}}/>

Props

ContextMeter
variant
Type "popover" | "card"
"popover"
A pill that opens into the card, or the card on its own.
defaultOpen
Type boolean
true
Open the card on mount.
warnAt
Type number
0.8
Share of the limit where it turns amber and offers Compact.
criticalAt
Type number
0.95
Share of the limit where it turns red.
label
Type string
"Context"
Heads the card and names the meter for screen readers.
model
Type string
"Claude Opus"
A small chip in the card naming the model. Empty hides it.
tokensPerMessage
Type number
2500
For the messages-left estimate. 0 hides it.
color
Type string
"#5b7bd6"
Colour the sources are shades of. Pass "currentColor" for neutral.
sourcesrequired
Type { id; label; tokens }[]
–
What fills the context, in order. Each gets a shade of `color`.
limitrequired
Type number
–
The model's context window, in tokens.
onCompact
Type () => void
–
Shows a Compact button once past warnAt.
compactLabel
Type string
"Compact"
Text of that button.
compactFrees / compactSource
Type number / string
–
Tokens compacting would free, and from which source (the last by default). Hovering Compact previews the result.
side
Type "bottom" | "top"
"bottom"
Preferred side for the card. Flips when there isn't room.
open / onOpenChange
Type boolean / (open) => void
–
Controlled open state.
className
Type string
–
Classes for the wrapper.