vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kibo-ticker

transition-effectminimal-flatmotion on file

A client-side, composable React ticker that renders each quote as a button, with pieces for the symbol, avatar, formatted price, and directional change. It ships as a shadcn registry TSX file and relies on the shared Avatar component, Tailwind classes, the cn utility, and browser Intl formatting.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of kibo-ticker at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of kibo-ticker at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kibo-ticker at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for kibo-ticker
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal33.7 KB (99.2 KB build, 65.5 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A tidy primitive for interactive watchlists, and it builds and mounts without a provider. Adopt it if you are willing to tune narrow-screen layout and color tokens; otherwise its overflow and contrast findings make the default presentation unsuitable for production.

Use it if

  • You need clickable market rows with consistent currency or percentage formatting.
  • Your interface already uses Tailwind, a cn helper, and shadcn-style component aliases.
  • You want small composable parts that can be arranged into watchlists or quote summaries.

Skip it if

  • The ticker must fit narrow screens without revisiting the surrounding fixed-width layout.
  • You need an accessibility-clean default, since the supplied muted price and change colors require contrast adjustments.
  • Your quotes are purely static text and should not carry button semantics.
  • You want streaming data, charting, or market fetching built into the component.

Install

Installation record for kibo-ticker
Declared dependenciesradix-ui, clsx, tailwind-merge
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add React and Tailwind styling, provide a cn helper backed by clsx and tailwind-merge, install or replace the Avatar primitive and its Radix dependency, and rewrite the component and utility import aliases to match your project. No context provider is required.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/shadcnblocks/kibo
License
MIT
Record published
2026-08-17

Alternatives

Other published entries for the transition-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.