Components
Loading preview...
Here is Card component
@ShadcnStudio
npx shadcn@latest add https://21st.dev/r/ShadcnStudio/card-studio'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'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