Accordion

Component 16

About

Here is Accordion component

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

Code

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

Usage.tsx

import { HeadsetIcon, PackageIcon, RefreshCwIcon } from 'lucide-react'

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'

const items = [
  {
    icon: PackageIcon,
    title: 'How do I track my order?',
    content: "You'll receive tracking information via email once your order ships.",
    media: 'https://cdn.21st.dev/assets/mirror/d8/d8ceb8513765eb1a3be008886ed5951b8f4cec0f4a356ca76bcee0fe0dc41d43.jpg'
  },
  {
    icon: RefreshCwIcon,
    title: 'What is your return policy?',
    content: 'We offer a 30-day return policy for most items.',
    media: 'https://cdn.21st.dev/assets/mirror/45/454ee6d9013c6e2b24201b7150a9ef139fbef6ea4c1624db8b2c6c620ebff353.jpg'
  },
  {
    icon: HeadsetIcon,
    title: 'How can I contact customer support?',
    content: 'You can reach us via live chat, email at support@example.com, or by phone at 1-800-123-4567.',
    media: 'https://cdn.21st.dev/assets/mirror/9f/9f012ef6b00cb33a0749992205b534701173ceb35fb36fe1667ba485cc1f59c1.jpg'
  }
]

const AccordionMediaContentDemo = () => {
  return (
    <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>
      {items.map((item, index) => (
        <AccordionItem key={index} value={`item-${index + 1}`}>
          <AccordionTrigger>
            <span className='flex items-center gap-4'>
              <item.icon className='size-4 shrink-0' />
              <span>{item.title}</span>
            </span>
          </AccordionTrigger>
          <AccordionContent className='space-y-4'>
            <p className='text-muted-foreground'>{item.content}</p>
            <img src={item.media} alt={item.title} className='w-full rounded-md' />
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

export default AccordionMediaContentDemo