StockTicker

stockticker-1779394643314.tsx

'use client'
import { useState, useEffect } from 'react'

const STOCKS = [
  { symbol:'EMPR', name:'Empire UI', price:142.50, change:+3.2, up:true },
  { symbol:'NEXT', name:'Nexera', price:89.20, change:-1.8, up:false },
  { symbol:'REAC', name:'React Corp', price:234.10, change:+0.5, up:true },
  { symbol:'PRMA', name:'Prisma Inc', price:67.80, change:+2.1, up:true },
]

export default function StockTicker({ stocks = STOCKS }) {
  const [prices, setPrices] = useState(stocks)
  useEffect(() => {
    const t = setInterval(() => {
      setPrices(p => p.map(s => {
        const delta = (Math.random() - 0.49) * 2
        const newPrice = Math.max(1, s.price + delta)
        return { ...s, price:newPrice, change:delta, up:delta>=0 }
      }))
    }, 2000)
    return () => clearInterval(t)
  }, [])
  return (
    <div style={{ background:'#1e1e2e', borderRadius:'16px', overflow:'hidden', maxWidth:'400px' }}>
      <div style={{ padding:'14px 18px', borderBottom:'1px solid #2d2d3d', display:'flex', alignItems:'center', gap:'8px' }}>
        <div style={{ width:'8px', height:'8px', borderRadius:'50%', background:'#10b981', animation:'blink 1s step-end infinite' }}/>
        <style>{'@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}'}</style>
        <span style={{ color:'#e2e8f0', fontWeight:700, fontSize:'14px' }}>Live Market</span>
      </div>
      {prices.map(s => (
        <div key={s.symbol} style={{ display:'flex', alignItems:'center', gap:'14px', padding:'14px 18px', borderBottom:'1px solid #1a1a2e' }}>
          <div style={{ width:'40px', height:'40px', borderRadius:'10px', background:s.up?'rgba(16,185,129,0.15)':'rgba(239,68,68,0.15)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            <span style={{ fontWeight:900, fontSize:'11px', color:s.up?'#10b981':'#ef4444' }}>{s.symbol}</span>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:600, fontSize:'13px', color:'#e2e8f0' }}>{s.name}</div>
            <div style={{ fontSize:'11px', color:'#64748b' }}>{s.symbol}</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontWeight:700, fontSize:'16px', color:'#e2e8f0' }}>${s.price.toFixed(2)}</div>
            <div style={{ fontSize:'12px', color:s.up?'#10b981':'#ef4444', fontWeight:600 }}>
              {s.up?'+':''}{s.change.toFixed(2)} ({s.up?'+':''}{((s.change/s.price)*100).toFixed(2)}%)
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryFinance

Frameworkreact

TierFREE

Copies0

About

Live stock price ticker with change indicator and sparklines

More from Finance

'use client'
import { useState, useEffect } from 'react'

const BASE_PRICES: Record<string, { price: number; change: number; cap: string; icon: string; color: string }> = {
  BTC: { price: 67420, change: 2.4, cap: '1.32T', icon: '₿', color: '#f59e0b'

CryptoTicker

Finance

'use client';
import { useState } from 'react';

export default function InvoiceCard() {
  const invoices = [
    { id: 'INV-2024', client: 'Acme Corp', amount: 4800, status: 'paid', date: 'May 15, 2026' },
    { id: 'INV-2025', client: 'Globex Inc',

InvoiceCard

Finance

'use client';
import { useState, useEffect } from 'react';

export default function CryptoPortfolio() {
  const [assets, setAssets] = useState([
    { symbol: 'BTC', name: 'Bitcoin', amount: 0.42, price: 67420, change: 2.3, color: '#f59e0b', icon: '₿

CryptoPortfolio

Finance

'use client'
import { useState } from 'react'

const BUDGET = [
  { cat:'Housing', budget:1500, spent:1500, icon:'🏠', color:'#6d28d9' },
  { cat:'Food', budget:600, spent:420, icon:'🍔', color:'#f59e0b' },
  { cat:'Transport', budget:300, spent:180,

BudgetTracker

Finance