Components
Loading preview...
Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/carouselimport { ShareholderReports, Report } from "@/components/ui/carousel";
// Sample data for the reports
const reportsData: Report[] = [
{
id: "q1fy26",
quarter: "Q1FY26",
period: "Q4FY26 | JULY 20, 2025",
imageSrc: "https://b.zmtcdn.com/investor-relations/363d6f33a40607fd7b70f39081d79eb6_1753090727.jpeg",
isNew: true,
},
{
id: "q4fy25",
quarter: "Q4FY25",
period: "Q4FY25 | MAY 1, 2025",
imageSrc: "https://b.zmtcdn.com/investor-relations/1199bb1a7e905267f520ace8be13fdad_1746093395.png",
},
{
id: "q3fy25",
quarter: "Q3FY25",
period: "Q3FY25 | JANUARY 20, 2025",
imageSrc: "https://b.zmtcdn.com/investor-relations/2f012a6bbbb592159108f792460fb5b3_1737366169.jpeg",
},
{
id: "q2fy25",
quarter: "Q2FY25",
period: "Q2FY25 | OCTOBER 15, 2024",
imageSrc: "https://b.zmtcdn.com/investor-relations/fbfcc09072b22ad718da3681e98f711d_1729591272.png",
},
{
id: "q1fy25",
quarter: "Q1FY25",
period: "Q1FY25 | JULY 18, 2024",
imageSrc: "https://b.zmtcdn.com/investor-relations/254790073164218ac21893a8046c0a05_1707385481.png",
},
];
// Demo component to showcase the ShareholderReports
export default function ShareholderReportsDemo() {
return (
<div className="w-full bg-background">
<ShareholderReports reports={reportsData} />
</div>
);
}