Watchlist Item

Pricing

About

A compact sidebar row for a trading/finance watchlist showing a colored ticker tile, symbol, price and a signed percentage change.

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

Code

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

Usage.tsx

import { WatchlistItem } from "@/components/ui/watchlist-item";

export default function WatchlistItemDemo() {
  return (
    <div className="flex w-60 flex-col gap-1.5">
      <WatchlistItem
        symbol="MAG4"
        price="1.0000"
        change="+2.38%"
        color="var(--chart-1)"
      />
      <WatchlistItem
        symbol="AIFR"
        price="1.0104"
        change="+0.84%"
        color="var(--chart-4)"
      />
      <WatchlistItem
        symbol="ATLS"
        price="0.9893"
        change="−0.64%"
        color="var(--chart-3)"
      />
    </div>
  );
}