Accordion With Picture

Component

About

Use this in your faqs

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

Code

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

Usage.tsx

import React from "react";
import { VerticalAccordion, type AccordionItem } from "@/components/ui/accordion-with-picture";
import { BarChart3, Bell, DollarSign, Play } from "lucide-react";

// Demo data
const demoItems: AccordionItem[] = [
  {
    id: "earn",
    title: "Earn more",
    icon: DollarSign,
    image: "https://cdn.21st.dev/assets/mirror/db/db1ca69d7807c7e48ccac41e71117b2ec040bdbd1746eeae2e667ca513dfda0f.jpg",
    description: "Maximize your earning potential with our comprehensive suite of financial tools and investment strategies designed for long-term growth.",
  },
  {
    id: "play",
    title: "Play more",
    icon: Play,
    image: "https://cdn.21st.dev/assets/mirror/7f/7f9d29ac5d4b2571ccf8109beba07e56c3a767212606c19c27cf143378c22f62.jpg",
    description: "Discover new entertainment possibilities and creative outlets that bring joy and fulfillment to your everyday life.",
  },
  {
    id: "track",
    title: "Keep track",
    icon: Bell,
    image: "https://cdn.21st.dev/assets/mirror/ad/ada13d4c2b684bb4f4e19158d041e41ad7aab2d38882e75435fc95c2bb437bf7.jpg",
    description: "Stay organized and never miss important updates with our intelligent notification system and progress tracking features.",
  },
  {
    id: "grow",
    title: "Grow faster",
    icon: BarChart3,
    image: "https://cdn.21st.dev/assets/mirror/dd/dda0709d5497fa3c49ba281ff127d3e4b73f2fc3ca249c04baf75f0153b96e26.jpg",
    description: "Accelerate your personal and professional development with data-driven insights and personalized growth recommendations.",
  },
];

export default function VerticalAccordionDemo() {
  return (
    <div className="bg-background">
        <VerticalAccordion 
          items={demoItems} 
          defaultOpen="earn"
          panelHeight="500px"
        />
    </div>
  );
}