Card Studio

Cards 22

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 { CircleFadingPlusIcon } from 'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

const CardInviteCardDemo = () => {
  return (
    <Card className='w-full max-w-lg'>
      <CardHeader>
        <CardTitle>Meeting Notes</CardTitle>
      </CardHeader>
      <CardContent className='grid gap-4 sm:grid-cols-2'>
        <div className='flex items-center gap-4'>
          <CircleFadingPlusIcon />
          <span className='text-sm font-semibold'>Invite Member </span>
        </div>
        <div className='flex items-center gap-4'>
          <Avatar>
            <AvatarImage src='https://cdn.21st.dev/assets/mirror/ec/ec81be4cc810190ce4d240fcc57295965c5cebaa8751558595ade91eb62c09a4.png' alt='Hallie Richards' />
            <AvatarFallback className='text-xs'>JA</AvatarFallback>
          </Avatar>
          <div className='flex flex-col'>
            <span className='text-sm font-semibold'>Jimmy Androson </span>
            <span className='text-muted-foreground text-sm'>UI Designer</span>
          </div>
        </div>
        <div className='flex items-center gap-4'>
          <Avatar>
            <AvatarImage src='https://cdn.21st.dev/assets/mirror/ae/ae6a92c60e520aa6a3fe089f29762926b8851effbc1d39107437dae04aa88ae3.png' alt='Hallie Richards' />
            <AvatarFallback className='text-xs'>DA</AvatarFallback>
          </Avatar>
          <div className='flex flex-col'>
            <span className='text-sm font-semibold'>Dean Ambrose </span>
            <span className='text-muted-foreground text-sm'>UX Designer</span>
          </div>
        </div>
        <div className='flex items-center gap-4'>
          <Avatar>
            <AvatarImage src='https://cdn.21st.dev/assets/mirror/2f/2fcafa6e39ea7272850e186aa5d39db75cba438a6a1194b908bc5a1385dd41bf.png' alt='Hallie Richards' />
            <AvatarFallback className='text-xs'>HR</AvatarFallback>
          </Avatar>
          <div className='flex flex-col'>
            <span className='text-sm font-semibold'>Anita John</span>
            <span className='text-muted-foreground text-sm'>Branding</span>
          </div>
        </div>
        <div></div>
        <div></div>
      </CardContent>
    </Card>
  )
}

export default CardInviteCardDemo