Context usage

Show how much of the context window is in use.

View code

import { ContextUsage } from "@stack/ui/context-usage";

export default function Example() {
  return (
    <ContextUsage.Root used={32000} limit={128000} resetsAt={null}>
      <ContextUsage.Trigger>
        <ContextUsage.Indicator aria-hidden="true" />
      </ContextUsage.Trigger>
      <ContextUsage.Content>
        <ContextUsage.Title />
        <ContextUsage.Details />
      </ContextUsage.Content>
    </ContextUsage.Root>
  );
}

Usage

import { ContextUsage } from "@stack/ui/context-usage";

Use token counts for used and limit. Pass null when usage or limits are unknown.

Unknown usage

Represent missing information with null rather than an invented count.

View code

import { ContextUsage } from "@stack/ui/context-usage";

export default function Example() {
  return (
    <ContextUsage.Root used={null} limit={null} resetsAt={null}>
      <ContextUsage.Trigger>
        <ContextUsage.Indicator aria-hidden="true" />
      </ContextUsage.Trigger>
      <ContextUsage.Content>
        <ContextUsage.Title />
        <ContextUsage.Details />
      </ContextUsage.Content>
    </ContextUsage.Root>
  );
}

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

ContextUsage.Root

Prop	Type	Required	Description
children	ReactNode | PayloadChildRenderFunction<unknown>	No	Content rendered inside the component.
open	boolean	No	Controlled open state.
defaultOpen	boolean	No	Whether the popover is initially open.
onOpenChange	((open: boolean, eventDetails: PopoverRoot.ChangeEventDetails) => void)	No	Event handler called when the popover is opened or closed.
onOpenChangeComplete	((open: boolean) => void)	No	Event handler called after any animations complete when the popover is opened or closed.
actionsRef	RefObject<PopoverRootActions | null>	No	A ref to imperative actions. - unmount: Ends the closing phase of the popover after an externally controlled closing animation finishes.
modal	boolean | "trap-focus"	No	Determines if the popover enters a modal state when open. - true: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled. - false: user interaction with the rest of the document is allowed. - 'trap-focus': focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
triggerId	string | null	No	ID of the trigger that the popover is associated with.
defaultTriggerId	string | null	No	ID of the trigger that the popover is associated with.
handle	Handle<unknown>	No	A handle to associate the popover with a trigger.
used	number | null	Yes	Number of tokens used; null when unknown.
limit	number | null	Yes	Context-window token limit; null when unknown.
resetsAt	number | Date | null	No	Time the usage resets, or null when no reset is known.

ContextUsage.Trigger

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
disabled	boolean	No	Disable interaction.
closeOnClick	boolean	No	Whether the tooltip should close when this trigger is clicked.
closeDelay	number	No	How long to wait before closing the tooltip.
delay	number	No	How long to wait before opening the tooltip on hover.
render	ReactElement<unknown, string | JSXElementConstructor<any>>	No	Replace the underlying element using render composition.
className	string	No	Additional CSS classes for the underlying element.
style	CSSProperties	No	Inline styles for the underlying element.
openOnHover	boolean	No	Open the hint when the trigger is hovered.

ContextUsage.Indicator

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.

ContextUsage.Content

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
align	Align	No	Alignment of the component.
alignOffset	number | OffsetFunction	No	Additional offset along the alignment axis in pixels.
side	Side	No	Side on which the popup or panel appears.
sideOffset	number | OffsetFunction	No	Distance between the anchor and the popup in pixels.

ContextUsage.Title

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.

ContextUsage.Details

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.