Ticker Strip

Component

About

A horizontal scrolling strip of price cells (avatar, symbol, price, and signed percentage change) for showing a row of stock or token quotes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ticker Strip to your project and fits it to your theme.

Code

How Ticker Strip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import TickerStrip from "@/components/ui/ticker-strip";

const tickers = [
  { symbol: "AAPLx", price: "$339.86", change: "+0.42%" },
  { symbol: "NVDAx", price: "$227.06", change: "+0.81%" },
  { symbol: "TSLAx", price: "$370.21", change: "-0.31%" },
  { symbol: "MSFTx", price: "$513.15", change: "+0.12%" },
  { symbol: "GOOGLx", price: "$340.43", change: "+0.55%" },
  { symbol: "AMZNx", price: "$247.93", change: "-0.20%" },
  { symbol: "METAx", price: "$730.50", change: "+1.02%" },
  { symbol: "SPYx", price: "$767.86", change: "+0.30%" },
];

export default function TickerStripDemo() {
  return (
    <div className="w-full max-w-3xl bg-background p-4">
      <TickerStrip items={tickers} />
    </div>
  );
}