Carousel

Component 323

About

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.

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

Code

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

Usage.tsx

import { 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://cdn.21st.dev/assets/mirror/09/09dd30283619658f20071b88376914aa0f195f990389f093cc2290a81950183b.jpg",
    isNew: true,
  },
  {
    id: "q4fy25",
    quarter: "Q4FY25",
    period: "Q4FY25 | MAY 1, 2025",
    imageSrc: "https://cdn.21st.dev/assets/mirror/03/03c17db56f1af15591b3ed3b2ecef910622e552f7a2cb08b56e60a0acf56f30f.jpg",
  },
  {
    id: "q3fy25",
    quarter: "Q3FY25",
    period: "Q3FY25 | JANUARY 20, 2025",
    imageSrc: "https://cdn.21st.dev/assets/mirror/ab/aba76720adfe9abcd3b4bbb3bc49c699e00ef73ecaf57c23154764fd2237da2a.jpg",
  },
  {
    id: "q2fy25",
    quarter: "Q2FY25",
    period: "Q2FY25 | OCTOBER 15, 2024",
    imageSrc: "https://cdn.21st.dev/assets/mirror/5d/5dd8332334723f45e431219c079b1b4a2a151078a36c7096a1b2e4eeeaf8cc85.jpg",
  },
  {
    id: "q1fy25",
    quarter: "Q1FY25",
    period: "Q1FY25 | JULY 18, 2024",
    imageSrc: "https://cdn.21st.dev/assets/mirror/73/73993a1ee2e8054b56f4b4cd0555ff771fde495c8c17d469c351f0a26d0b3605.jpg",
  },
];

// Demo component to showcase the ShareholderReports
export default function ShareholderReportsDemo() {
  return (
    <div className="w-full bg-background">
      <ShareholderReports reports={reportsData} />
    </div>
  );
}