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