Card Studio

Buttons 9

About

Here is Card component

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

Code

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

Usage.tsx

'use client'

import { useState } from 'react'

import { XIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

const CardActionDemo = () => {
  const [isActive, setIsActive] = useState(true)

  if (!isActive) return null

  return (
    <Card className='relative max-w-lg shadow-none'>
      <Button
        variant='ghost'
        size='icon'
        onClick={() => setIsActive(false)}
        className='absolute top-2 right-2 rounded-full'
      >
        <XIcon />
        <span className='sr-only'>Close</span>
      </Button>
      <CardHeader>
        <CardTitle className='text-center'>Have a project in mind</CardTitle>
      </CardHeader>
      <CardContent className='flex flex-col gap-4 text-center'>
        <p>Let&apos;s discuss! Our Assistant team is excited to hear about your projects, ideas and questions. </p>
        <Button>Contact Our Team</Button>
      </CardContent>
    </Card>
  )
}

export default CardActionDemo