Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/stock-trends-carouselimport { 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>
);
}