navigation

Collapsible 7

FAQ-style collapsible card that expands to reveal answer text and a wide cover image. Built on shadcn collapsible + card.

Inspired by Watermelon UI · View source

Preview

How can I follow a shipment update?

Copy for AI

Copy for Lovable is the fastest way to move this component into another Lovable project — it copies the full prompt with dependencies, files, and a usage example. Copy all files gives you the raw source if you want to paste it manually.

Installation

npx shadcn@latest add https://registry.watermelon.sh/r/collapsible-7.json

Paste into a terminal — or paste into a Lovable chat and I'll run it for you.

Source files

components/ui/collapsible-7.tsx

'use client'

import { useState } from 'react'

import { ChevronUpIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardTitle } from '@/components/ui/card'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'

type HelpCard = {
  answer: string
  imageAlt: string
  imageSrc: string
  question: string
}

const helpCard: HelpCard = {
  answer:
    'Once your shipment is packed, we will send a delivery link by email. You can open it any time to see the courier status and the latest package movement.',
  imageAlt: 'Package ready for shipment on a desk',
  imageSrc: 'https://images.pexels.com/photos/6169132/pexels-photo-6169132.jpeg?auto=compress&cs=tinysrgb&w=1200',
  question: 'How can I follow a shipment update?'
}

const Collapsible7 = () => {
  const [open, setOpen] = useState<boolean>(false)

  return (
    <Card className='w-full max-w-md overflow-hidden border-border/70 p-0  shadow-xl rounded-none'>
      <Collapsible open={open} onOpenChange={setOpen}>
        <div className='flex items-center justify-between px-6 py-5'>
          <CardTitle className='text-base'>{helpCard.question}</CardTitle>
          <div>
            <CollapsibleTrigger>
              <Button variant='outline' size='sm' className='border-border/70'>
                <span>{open ? 'Hide' : 'Show'}</span>
                <ChevronUpIcon className={`size-4 transition-transform ${open ? '' : 'rotate-180'}`} />
              </Button>
            </CollapsibleTrigger>
          </div>
        </div>
        <CollapsibleContent>
          <CardContent className='space-y-3 px-0 pb-0'>
            <p className='px-6 text-sm leading-6 text-muted-foreground'>{helpCard.answer}</p>
            <img src={helpCard.imageSrc} alt={helpCard.imageAlt} className='aspect-video h-70 w-full object-cover' />
          </CardContent>
        </CollapsibleContent>
      </Collapsible>
    </Card>
  )
}

export default Collapsible7

Dependencies

lucide-react