Stock Category List

Component 43

About

StockCategoryList A responsive and accessible accordion component to display categorized lists of items. Each category features a title and an icon, and clicking it reveals a detailed list. It's themed for both light and dark modes using shadcn/ui variables.

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

Code

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

Usage.tsx

import { StockCategoryList, StockCategory } from '@/components/ui/stock-category-list';
import {
  Cpu,
  HeartPulse,
  Landmark,
  ShoppingBasket,
  Flame,
} from 'lucide-react';

// Demo data for 5 stock categories
const stockData: StockCategory[] = [
  {
    title: 'Technology',
    icon: Cpu,
    stocks: [
      { name: 'Apple Inc.', ticker: 'AAPL', price: 172.25, change: 1.12 },
      { name: 'Microsoft Corp.', ticker: 'MSFT', price: 340.54, change: -0.45 },
      { name: 'NVIDIA Corp.', ticker: 'NVDA', price: 470.61, change: 2.33 },
    ],
  },
  {
    title: 'Healthcare',
    icon: HeartPulse,
    stocks: [
      { name: 'Johnson & Johnson', ticker: 'JNJ', price: 165.78, change: -0.89 },
      { name: 'Pfizer Inc.', ticker: 'PFE', price: 35.12, change: 0.21 },
    ],
  },
  {
    title: 'Financials',
    icon: Landmark,
    stocks: [
      { name: 'JPMorgan Chase & Co.', ticker: 'JPM', price: 150.44, change: 0.55 },
      { name: 'Bank of America', ticker: 'BAC', price: 29.88, change: -1.02 },
      { name: 'Visa Inc.', ticker: 'V', price: 245.91, change: 0.15 },
    ],
  },
  {
    title: 'Consumer Staples',
    icon: ShoppingBasket,
    stocks: [
      { name: 'Procter & Gamble', ticker: 'PG', price: 155.60, change: 0.05 },
      { name: 'Coca-Cola Co.', ticker: 'KO', price: 60.10, change: -0.30 },
    ],
  },
  {
    title: 'Energy',
    icon: Flame,
    stocks: [
      { name: 'Exxon Mobil Corp.', ticker: 'XOM', price: 112.76, change: 1.78 },
      { name: 'Chevron Corp.', ticker: 'CVX', price: 164.21, change: 1.51 },
    ],
  },
];

// The demo component that renders the StockCategoryList
const StockCategoryListDemo = () => {
  return (
    <div className="p-4 md:p-8 bg-background">
        <StockCategoryList categories={stockData} />
    </div>
  );
};

export default StockCategoryListDemo;