Login Card

Cards 15

About

Here is Login Card component

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

Code

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

Usage.tsx

'use client';

import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import Copy from '../copy';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Slider } from '@/components/ui/slider';
import {
  Bell,
  Calendar,
  Check,
  Cloud,
  CreditCard,
  Download,
  LucideBarChart,
  LucideLineChart,
  LucidePieChart,
  Map,
  Mic,
  Moon,
  Music,
  Phone,
  Search,
  Star,
  Sun,
  Zap,
} from 'lucide-react';
import { DollarSign, TrendingUp, Users } from 'lucide-react';
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';
import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis } from 'recharts';
import { GetDimensions, GridStyle, GridColumns, addGridStyle, addGridBorders } from '@/utils/GridStyle';
import { useTheme } from 'next-themes';
export default function TaskCard() {
  return (
    <Card className="w-[310px]">
      <CardHeader>
        <CardTitle>Current Tasks</CardTitle>
        <CardDescription>Your team&apos;s ongoing tasks</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {["Design system update", "API integration", "User testing"].map(
            (task, index) => (
              <div key={index} className="flex items-center">
                <input type="checkbox" id={`task-${index}`} className="mr-2" />
                <label htmlFor={`task-${index}`} className="flex-1">
                  {task}
                </label>
                <Badge
                  variant={
                    index === 0
                      ? "default"
                      : index === 1
                      ? "secondary"
                      : "outline"
                  }
                >
                  {index === 0
                    ? "In Progress"
                    : index === 1
                    ? "Pending"
                    : "Completed"}
                </Badge>
              </div>
            )
          )}
        </div>
      </CardContent>
      <CardFooter>
        <Button variant="outline" className="w-full">
          View All Tasks
        </Button>
      </CardFooter>
    </Card>
  )
}