First goal
A goal switches what it measures, and its stats refresh.
Not quite it? Ask for a variation
Install
Writes one React component into components/illos. Nothing else to install.
npx shadcn@latest add https://illos.dev/r/flat/first-goal.jsonOr hand it to your agent
Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.
How it moves
- a goal shows three stats and two outcomes it can measure.
- a click picks the page view, and the stats refresh.
- a second click goes back to the custom event, and they refresh again.
Where it fits
For analytics and marketing products: the goals page before the first goal, the setup step that asks what counts as a conversion, or a features card on tracking outcomes. Switching between a page view and a custom event, with the stats refreshing each time, shows that a goal is one choice and the numbers follow from it. As a spot it fits above a short line and a Create goal button. It is free to copy and pairs with First funnel, Revenue not set up and Usage meter.
Pairs well with First funnel, Revenue not set up and Usage meter.
On your site
Read where product illustrations go, how to place an animated SVG and how to keep animations fast.
For developers
- File size
- 3.9 KB gzipped
- Motion
- Plays once, 3.8 s, then holds
- Reduced motion
- Shows a still
- File
- first-goal.svg