Ticker Tape
Marquee-style scrolling symbol tape with price and change badges. Install Ticker Tape from the VLLNT UI registry with the shadcn CLI.
Marquee-style scrolling symbol tape with price and change badges. Part of the data family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Ticker Tape to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ticker-tape.jsonSource
import * as React from "react";
import { ArrowDownRight, ArrowUpRight, Dot } from "lucide-react";
import { formatChange } from "../../lib/format";
import { cn } from "../../lib/utils";
import { Badge } from "../badge/badge";
export type TickerTapeItem = {
change: number;
price: number | string;
symbol: string;
volume?: string;
};
export type TickerTapeProps = {
items: TickerTapeItem[];
pauseOnHover?: boolean;
speedSeconds?: number;
} & React.HTMLAttributes<HTMLDivElement>;
const tickerTapeKeyframes = `
@keyframes ticker-tape-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
`;
function formatPrice(price: number | string) {
return typeof price === "number" ? price.toLocaleString() : price;
}
function TickerTapeRow({ items }: { items: TickerTapeItem[] }) {
return (
<div className="flex min-w-max items-center gap-3 p-3">
{items.map((item) => {
const isPositive = item.change >= 0;
const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
return (
<div
className="flex min-w-[12rem] items-center gap-3 rounded-full border border-border/70 bg-background/80 px-3 py-2 shadow-sm"
key={`${item.symbol}-${item.price}-${item.change}`}
>
<div className="flex min-w-0 flex-col">
<span className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
{item.symbol}
</span>
<span className="truncate text-sm font-semibold text-foreground">
{formatPrice(item.price)}
</span>
</div>
<Badge
className={cn(
"ml-auto gap-1 rounded-full border px-2 py-0.5 text-[11px] tabular-nums",
isPositive
? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400",
)}
variant="outline"
>
<TrendIcon className="size-3" />
{formatChange(item.change)}
</Badge>
{item.volume ? (
<span className="hidden items-center text-xs text-muted-foreground sm:inline-flex">
<Dot className="size-3.5" />
{item.volume}
</span>
) : null}
</div>
);
})}
</div>
);
}
export const TickerTape = ({
className,
items,
pauseOnHover = true,
ref: reference,
speedSeconds = 28,
...props
}: TickerTapeProps & { ref?: React.Ref<HTMLDivElement> }) => {
if (items.length === 0) {
return null;
}
return (
<div
aria-label="TickerTape"
className={cn(
"relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
className,
)}
ref={reference}
role="region"
{...props}
>
<style>{tickerTapeKeyframes}</style>
<div
className={cn(
"flex w-max items-stretch",
pauseOnHover && "hover:[animation-play-state:paused]",
)}
style={{
animationDuration: `${speedSeconds}s`,
animationIterationCount: "infinite",
animationName: "ticker-tape-scroll",
animationTimingFunction: "linear",
}}
>
<TickerTapeRow items={items} />
<div aria-hidden="true">
<TickerTapeRow items={items} />
</div>
</div>
</div>
);
};
TickerTape.displayName = "TickerTape";
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.