Ticker

A composable finance ticker for displaying symbols, prices and changes.

Installation

npx love-ui@latest add ticker

Usage

import { Ticker, TickerIcon, TickerSymbol, TickerPrice, TickerChange } from "@/components/ticker"

<Ticker>
  <TickerIcon src="/logo.png" alt="AAPL" />
  <TickerSymbol>AAPL</TickerSymbol>
  <TickerPrice value={150.25} />
  <TickerChange value={2.5} percent />
</Ticker>

Features

Flexible composition with optional icon, symbol, price, and change components
Color-coded up/down price change indicators with optional percentage formatting
Support for ISO 4217 currencies and IETF BCP 47 locales
Icon fallback to symbol when icon source is not valid

Examples

With percentage change

"use client";

import {
  Ticker,
  TickerIcon,
  TickerPrice,
  TickerPriceChange,
  TickerSymbol,
} from "../../../../../packages/ticker";
import Image from "next/image";

const logoToken = process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN;

const items = [
  {
    symbol: "TSLA",
    price: 182.12,
    change: -3.12,
  },
  {
    symbol: "MSFT",
    price: 409.33,
    change: 2.18,
  },
];

const Example = () => (
  <>
    {items.map((i) => (
      <Ticker key={i.symbol}>
        {logoToken ? (
          <TickerIcon asChild>
            <Image
              alt={i.symbol}
              height={26}
              src={`https://img.logo.dev/ticker/${i.symbol}?token=${logoToken}&size=26&retina=true`}
              width={26}
            />
          </TickerIcon>
        ) : (
          <TickerIcon symbol={i.symbol} />
        )}
        <TickerSymbol symbol={i.symbol} />
        <TickerPrice price={i.price} />
        <TickerPriceChange change={i.change} isPercent />
      </Ticker>
    ))}
  </>
);

export default Example;

Currencies and locales

"use client";

import {
  Ticker,
  TickerIcon,
  TickerPrice,
  TickerPriceChange,
  TickerSymbol,
} from "../../../../../packages/ticker";
import Image from "next/image";

const logoToken = process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN;

const items = [
  {
    symbol: "DUOL",
    logoSymbol: "DUOL",
    price: 478.03,
    change: 5.2,
  },
  {
    symbol: "DBD",
    logoSymbol: "DBD",
    price: 102.33,
    change: 1.05,
    currency: "EUR",
    locale: "de-DE",
  },
  {
    symbol: "7203.T",
    logoSymbol: "TM",
    price: 2460,
    change: -120,
    currency: "JPY",
    locale: "ja-JP",
  },
];

const Example = () =>
  items.map((i) => (
    <Ticker currency={i.currency} key={i.symbol} locale={i.locale}>
      {logoToken ? (
        <TickerIcon asChild>
          <Image
            alt={i.symbol}
            height={26}
            src={`https://img.logo.dev/ticker/${i.logoSymbol}?token=${logoToken}&size=26&retina=true`}
            width={26}
          />
        </TickerIcon>
      ) : (
        <TickerIcon symbol={i.symbol} />
      )}
      <TickerSymbol symbol={i.symbol} />
      <TickerPrice price={i.price} />
      <TickerPriceChange change={i.change} />
    </Ticker>
  ));

export default Example;

Inline usage

In other autonomous vehicle news, Alphabet-owned Waymo is looking to bring its robotaxi service to New York.

"use client";

import {
  Ticker,
  TickerIcon,
  TickerPrice,
  TickerPriceChange,
  TickerSymbol,
} from "../../../../../packages/ticker";
import Image from "next/image";

const ticker = "GOOG";
const logoToken = process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN;

const Example = () => (
  <p>
    In other autonomous vehicle news, Alphabet-owned{" "}
    <Ticker className="rounded-full bg-muted p-1 pr-2 text-xs">
      {logoToken ? (
        <TickerIcon asChild>
          <Image
            alt={ticker}
            height={20}
            src={`https://img.logo.dev/ticker/${ticker}?token=${logoToken}&size=20&retina=true`}
            width={20}
          />
        </TickerIcon>
      ) : (
        <TickerIcon className="size-5" symbol={ticker} />
      )}
      <TickerSymbol symbol={ticker} />
      <TickerPrice price={175.41} />
      <TickerPriceChange change={2.13} />
    </Ticker>{" "}
    Waymo is looking to bring its robotaxi service to New York.
  </p>
);

export default Example;

Credit Card Deck