Stock Trends Carousel

Dashboards 77

About

StockTrendsCarousel A responsive and animated carousel to display trending stock information. It features a clean header, a horizontally scrollable list of stock cards, and a navigation button.

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

Code

How Stock Trends Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { StockTrendsCarousel } from "@/components/ui/stock-trends-carousel";

const mockStocks = [
  {
    ticker: "AAPL",
    name: "Apple Inc",
    logoUrl: "https://logo.clearbit.com/apple.com",
    price: 257.13,
    currency: "USD",
    changePercent: 0.66,
  },
  {
    ticker: "AMD",
    name: "Advanced Micro Devices",
    logoUrl: "https://logo.clearbit.com/amd.com",
    price: 169.73,
    currency: "USD",
    changePercent: 3.49,
  },
  {
    ticker: "AMZN",
    name: "Amazon.com, Inc.",
    logoUrl: "https://logo.clearbit.com/amazon.com",
    price: 222.41,
    currency: "USD",
    changePercent: 0.81,
  },
  {
    ticker: "AVGO",
    name: "Broadcom Inc.",
    logoUrl: "https://logo.clearbit.com/broadcom.com",
    price: 338.18,
    currency: "USD",
    changePercent: 1.44,
  },
  {
    ticker: "BABA",
    name: "Alibaba Group Holdings",
    logoUrl: "https://logo.clearbit.com/alibaba.com",
    price: 189.34,
    currency: "USD",
    changePercent: 3.59,
  },
  {
    ticker: "TSLA",
    name: "Tesla, Inc.",
    logoUrl: "https://logo.clearbit.com/tesla.com",
    price: 177.46,
    currency: "USD",
    changePercent: -1.21,
  },
  {
    ticker: "GOOGL",
    name: "Alphabet Inc.",
    logoUrl: "https://logo.clearbit.com/google.com",
    price: 176.03,
    currency: "USD",
    changePercent: 0.92,
  },
];


export default function StockCarouselDemo() {
  return (
    <div className="w-full bg-background flex items-center justify-center py-12">
      <StockTrendsCarousel
        title="US stocks"
        subtitle="Community trends"
        stocks={mockStocks}
      />
    </div>
  );
}