Pro
Overflow marquee
A label too long for its space: at rest it ends in an ellipsis, and while it or the row around it is pointed at or focused it slides to show its end, waits and slides back. A label that fits never moves.
pnpm dlx shadcn@latest add @caliper/overflow-marqueeWhen to use
Use it for
- Track names, file names and titles in narrow rows and cards.
- Places where truncation would hide the part that tells items apart.
Skip it when
- Text people need to read in full at once; let it wrap.
- Several moving labels side by side.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Even speed
- The slide time grows with the hidden distance, so long and short overflows move at the same pace.
- Full text always
- The whole label is in the page and its title; reduced motion keeps the ellipsis.
Installation
pnpm dlx shadcn@latest add @caliper/overflow-marquee
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { OverflowMarquee } from "@/components/ui/overflow-marquee"
The worked example comes with Pro
The 39-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
OverflowMarquee
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes option semantics.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.