Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Popover component
A context-window usage popover: a segmented usage bar splitting system, history, tools, docs and prompt tokens across a vibrant multi-hue data palette, a color-coded legend with token counts and a remaining-capacity footer, revealed from a trigger with click-outside and Escape to close.
prefers-reduced-motionrole="dialog" with an aria-labelaria-haspopup, aria-expanded and aria-controlsaria-hidden:focus-visible with --ring outline on all interactive elementsprefers-reduced-motion: reduce disables all animationsOpen Context Window Popover in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the popover is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.

A deep-reasoning popover with a gradient border: a chain-of-thought stepper showing completed and active reasoning steps with a pulsing marker, plus a depth meter, revealed from a gradient trigger with click-outside and Escape to close.

A model-picker popover built around a two-layer dropdown transition: the panel springs up from the trigger with a soft cross-blur while its content settles a beat later, and the model list slides sideways to per-model detail panels. Maraschino cherry theme, keyboard navigable, Escape to close.

An AI guardrails popover: a safety-analysis panel scoring harmful, PII, bias and toxicity risks with color-coded meter bars, a pass badge and a model latency footer, revealed from a trigger with click-outside and Escape to close.

A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.

An AI attention-pattern popover: a 5x5 query/key attention heatmap with token-labeled axes, highlighted attended tokens, a weight legend and a live model status footer, revealed from a trigger button with click-outside and Escape to close.

A minimal accessible tooltip set shown on a bare row of real action buttons — four placements (top, bottom, left, right) on hover and keyboard focus, with a directional arrow and `aria-describedby` wiring. No panel, no chrome: the triggers float directly on the page canvas.
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
