Data & Chartsregistry/ui/balloon.tsx/r/balloon.json

Balloon

Standalone speech-balloon callout with mitered SVG tail and inked marker-yellow target dot.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Peak Oct 31 · $5,654

Holdout cohort +0.51 pp

Dark · Flashback.f12-theme-dark

Interactive preview

Peak Oct 31 · $5,654

Holdout cohort +0.51 pp

Install & copy-in source

shadcn CLI (balloon.json)

npx shadcn@latest add https://frame12.dev/r/balloon.json

Usage example (Balloon)

import { Balloon } from '@/components/frame12';

export function PeakCallout() {
  return <Balloon tailOffset={-8} showDot>Peak Oct 26 · $6,120</Balloon>;
}

WCAG AAAccessibility guarantees

Accessibility notes

Keeps annotation text in the DOM while marking the decorative SVG tail aria-hidden="true".

GrammarFRAME/12 rules

Design grammar

Replaces floating shadow popovers with an inked speech balloon and seamless .f12-balloon-gap bridge.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/balloon.tsx)
Prop	Type	Default	Description
`tailOffset`	`number`	`0`	Horizontal tail tip offset in pixels (-36 to +36).
`showDot`	`boolean`	`true`	Renders the 4px marker-yellow target dot with 2px ink stroke below the tail.