Card Studio

Buttons 36

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

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

const CardHorizontalDemo = () => {
  return (
    <Card className='max-w-lg py-0 sm:flex-row sm:gap-0'>
      <CardContent className='grow-1 px-0'>
        <img
          src='https://cdn.21st.dev/assets/mirror/bc/bc34b62dfeb6fed58b6207a07900c2c9290ebe3fac311c6a1228e84a9a7d3d3c.png'
          alt='Banner'
          className='size-full rounded-l-xl'
        />
      </CardContent>
      <div className='sm:min-w-54'>
        <CardHeader className='pt-6'>
          <CardTitle>Dreamy Colorwave Gradient</CardTitle>
          <CardDescription>A smooth blend of vibrant pinks, purples, and blues for a magical touch.</CardDescription>
        </CardHeader>
        <CardFooter className='gap-3 py-6'>
          <Button className='bg-transparent bg-gradient-to-br from-purple-500 to-pink-500 text-white focus-visible:ring-pink-600/20'>
            Explore More
          </Button>
        </CardFooter>
      </div>
    </Card>
  )
}

export default CardHorizontalDemo