Card Widget - UI Container Built with Tailwind CSS

Card Component Library

Browse and explore components

Top Cards

Invoices

59

Chats

3,560

Blogs

696

Projects

356

Products

$96k

Followers

96

Blogs

696

"use client"
import Image from "next/image"
import CardBox from "@/app/components/shared/CardBox"
import iconConnect from "/public/images/svgs/icon-connect.svg"
import iconSpeechBubble from "/public/images/svgs/icon-speech-bubble.svg"
import iconFavorites from "/public/images/svgs/icon-favorites.svg"
import iconMailbox from "/public/images/svgs/icon-mailbox.svg"
import iconBriefcase from "/public/images/svgs/icon-briefcase.svg"
import iconUser from "/public/images/svgs/icon-user-male.svg"
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import Link from "next/link"

const TopCards = () => {

    const TopCardInfo = [
        {
            key: "card1",
            title: "Invoices",
            desc: "59",
            img: iconConnect,
            bgcolor: "bg-lightprimary! dark:bg-lightprimary!",
            textclr: "text-primary dark:text-primary",
            url: "/apps/invoice/list"
        },
        {
            key: "card2",
            title: "Chats",
            desc: "3,560",
            img: iconSpeechBubble,
            bgcolor: "bg-lightsuccess! dark:bg-lightsuccess!",
            textclr: "text-success dark:text-success",
            url: "/apps/chats"
        },
        {
            key: "card3",
            title: "Blogs",
            desc: "696",
            img: iconFavorites,
            bgcolor: "bg-lighterror! dark:bg-lighterror!",
            textclr: "text-error dark:text-error",
            url: "/apps/blog/post"
        },
        {
            key: "card4",
            title: "Projects",
            desc: "356",
            img: iconMailbox,
            bgcolor: "bg-lightinfo! dark:bg-lightinfo!",
            textclr: "text-info dark:text-info",
            url: "/apps/user-profile/gallery"
        },
        {
            key: "card5",
            title: "Products",
            desc: "$96k",
            img: iconBriefcase,
            bgcolor: "bg-lightwarning! dark:bg-lightwarning!",
            textclr: "text-warning dark:text-warning",
            url: "/apps/ecommerce/list"

        },
        {
            key: "card7",
            title: "Followers",
            desc: "96",
            img: iconUser,
            bgcolor: "bg-lightprimary! dark:bg-lightprimary!",
            textclr: "text-primary dark:text-primary",
            url: "/apps/user-profile/followers"
        },
        {
            key: "card8",
            title: "Blogs",
            desc: "696",
            img: iconFavorites,
            bgcolor: "bg-lighterror! dark:bg-lighterror!",
            textclr: "text-error dark:text-error",
            url: "/apps/blog/post"
        },
    ]


    return (
        <>
            <div>
                <Swiper
                    slidesPerView={6}
                    spaceBetween={24}
                    loop={true}
                    dir="ltr"
                    grabCursor={true}
                    breakpoints={{
                        0: {
                            slidesPerView: 1,
                            spaceBetween: 10,
                        },
                        640: {
                            slidesPerView: 2,
                            spaceBetween: 14,
                        },
                        768: {
                            slidesPerView: 3,
                            spaceBetween: 18,
                        },
                        1030: {
                            slidesPerView: 4,
                            spaceBetween: 18,
                        },
                        1200: {
                            slidesPerView: 6,
                            spaceBetween: 24,
                        },
                    }}
                    pagination={{
                        clickable: true,
                    }}
                    className="mySwiper"
                >
                    {
                        TopCardInfo.map((item) => {
                            return (
                                <SwiperSlide key={item.key} >
                                    <Link href={item.url} >
                                        <CardBox className={`shadow-none border-0 ${item.bgcolor} w-full`}>
                                            <div className="text-center">
                                                <div className="flex justify-center">
                                                    <Image src={item.img}
                                                        width="50" height="50" className="mb-3" alt="profile-image" />
                                                </div>
                                                <p className={`font-semibold ${item.textclr} mb-1`}>
                                                    {item.title}
                                                </p>
                                                <h5 className={`text-lg font-semibold ${item.textclr} mb-0`}>{item.desc}</h5>
                                            </div>
                                        </CardBox>
                                    </Link>
                                </SwiperSlide>
                            )
                        })
                    }

                </Swiper>
            </div>
        </>
    )
}
export default TopCards

Best Selling Product Card

Best Selling Products

Overview 2023

MaterialPro

$23,568

55%

MaterialPro

$23,568

55%

"use client"

import Image from "next/image"
import CardBox from "@/app/components/shared/CardBox"
import { Badge, Progress } from "flowbite-react"
const SellingProducts = () => {

    return (
        <CardBox className="p-0 overflow-hidden" >
            <div className="bg-primary">
                <div className="p-8 pb-0">
                    <h5 className="text-lg font-semibold text-white">Best Selling Products</h5>
                    <p className="card-subtitle text-white dark:text-white">Overview 2023</p>
                    <div className="flex justify-center  mt-3">
                        <Image
                            src="/images/backgrounds/piggy.png"
                            alt="pigggy-bg"
                            width={251}
                            height={162}
                        />
                    </div>
                </div>
                <div className="px-2 pb-2">
                    <div className="bg-white dark:dark:bg-dark-header p-6 rounded-[7px]">
                        <div className="mb-8">
                            <div className="flex justify-between items-center mb-3">
                                <div>
                                    <h6 className="text-base mb-0.5 text-inherit" >MaterialPro</h6>
                                    <p>$23,568</p>
                                </div>
                                <div>
                                    <Badge color={"lightprimary"} className="text-sm rounded-md py-1.1" >55%</Badge>
                                </div>
                            </div>
                            {/* Progress */}
                            <Progress progress={45} size="sm" color="primary" />
                            {/* End Progress */}
                        </div>
                        <div>
                            <div className="flex justify-between items-center mb-3">
                                <div>
                                    <h6 className="text-base mb-0.5" >MaterialPro</h6>
                                    <p>$23,568</p>
                                </div>
                                <div>
                                    <Badge color={"lightsecondary"} className="text-sm rounded-md py-1.1" >55%</Badge>
                                </div>
                            </div>
                            {/* Progress */}
                            <Progress progress={45} size="sm" color="secondary" />
                            {/* End Progress */}
                        </div>
                    </div>
                </div>
            </div>
        </CardBox>

    )
}

export default SellingProducts

Payment Gatways Cards

Recent Transactions

Platform for Income

PayPal Transfer

Money added

+$6,235

Wallet

Bill payment

+$345

Credit Card

Money reversed

+$2,235

Refund

Bill Payment

-$32

"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import { Button } from "flowbite-react";
import Image from "next/image";

const PaymentGateway = () => {
  const RecentTransData = [
    {
      img: "/images/svgs/icon-paypal.svg",
      title: "PayPal Transfer",
      subtitle: "Money added",
      rank: "+$6,235",
      disable: "",
      bgcolor: "secondary",
    },
    {
      img: "/images/svgs/icon-office-bag.svg",
      title: "Wallet",
      subtitle: "Bill payment",
      rank: "+$345",
      disable: "opacity-80",
      bgcolor: "success",
    },
    {
      img: "/images/svgs/icon-master-card.svg",
      title: "Credit Card",
      subtitle: "Money reversed",
      rank: "+$2,235",
      disable: "",
      bgcolor: "warning",
    },
    {
      img: "/images/svgs/icon-pie.svg",
      title: "Refund",
      subtitle: "Bill Payment",
      rank: "-$32",
      disable: "opacity-80",
      bgcolor: "error",
    },
  ];
  return (
    <>
      <CardBox>
        <div>
          <h3 className="card-title">Recent Transactions</h3>
          <p className="card-subtitle">Platform for Income</p>
        </div>
        <div className="mt-7 flex flex-col gap-6">
          {RecentTransData.map((item, index) => (
            <div className="flex gap-3.5 items-center" key={index}>
              <div
                className={`h-11 w-11 rounded-md flex justify-center items-center bg-light${item.bgcolor} dark:bg-dark${item.bgcolor}`}
              >
                <Image src={item.img} alt="icon" className="h-6 w-6" width={24} height={24} />
              </div>
              <div>
                <h4 className="text-base">{item.title}</h4>
                <p className="text-sm text-darklink">{item.subtitle}</p>
              </div>
              <div
                className={`ms-auto font-medium text-ld ${item.disable}`}
              >
                {item.rank}
              </div>
            </div>
          ))}
        </div>
        <div className="">
          <Button color={"primary"} className="w-full mt-7">
            View All Transactions
          </Button>
        </div>
      </CardBox>
    </>
  );
};

export default PaymentGateway;

Blog Cards

2 min Read

Social

As yen tumbles, gadget-loving Japan goes for secondhand iPhones

Intel loses bid to revive antitrust case against patent foe Fortress

COVID outbreak deepens as more lockdowns loom in China

9,480

Sat, Dec 17

"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";
import { Badge } from "flowbite-react";
import { TbPoint } from "react-icons/tb";

import { Icon } from "@iconify/react";
import Link from "next/link";

const BlogCardsData = [
  {
    avatar: "/images/profile/user-6.jpg",
    coveravatar: "/images/blog/blog-img1.jpg",
    read: "2 min Read",
    title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones",
    category: "Social",
    name: "Georgeanna Ramero",
    view: "9,125",
    comments: "3",
    time: "Mon, Dec 19",
    url: ''
  },
  {
    avatar: "/images/profile/user-2.jpg",
    coveravatar: "/images/blog/blog-img2.jpg",
    read: "2 min Read",
    title:
      "Intel loses bid to revive antitrust case against patent foe Fortress",
    category: "Gadget",
    name: "Georgeanna Ramero",
    view: "4,150",
    comments: "38",
    time: "Sun, Dec 18",
    url: ''
  },
  {
    avatar: "/images/profile/user-3.jpg",
    coveravatar: "/images/blog/blog-img3.jpg",
    read: "2 min Read",
    title: "COVID outbreak deepens as more lockdowns loom in China",
    category: "Health",
    name: "Georgeanna Ramero",
    view: "9,480",
    comments: "12",
    time: "Sat, Dec 17",
    url: ''
  },
];

const BlogCardsCode = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6 mt-[30px]">
        {BlogCardsData.map((item, i) => (
          <div className="lg:col-span-4 col-span-12" key={i}>
            <Link href={item.url} className="group">
              <CardBox className="p-0 overflow-hidden ">
                <div className="relative">
                  <Image src={item.coveravatar} alt="tailwindadmin" width={400} height={250} />
                  <Badge
                    color={"muted"}
                    className="absolute bottom-5 end-5 rounded-md font-semibold"
                  >
                    {item.read}
                  </Badge>
                </div>
                <div className="px-6 pb-6">
                  <Image
                    src={item.avatar}
                    className="h-10 w-10 rounded-full -mt-7 relative z-1"
                    alt="user"
                    width={40}
                    height={40}
                  />
                  <Badge color={"muted"} className="mt-6 rounded-md">
                    {item.category}
                  </Badge>
                  <p className="text-lg my-6 text-inherit group-hover:text-primary line-clamp-2">{item.title}</p>
                  <div className="flex">
                    <div className="flex gap-2 me-6 items-center">
                      <Icon icon="tabler:eye" height={18} className="text-ld" />
                      <span className="text-sm text-darklink">{item.view}</span>
                    </div>
                    <div className="flex gap-2 items-center">
                      <Icon icon="tabler:message-2" height={18} className="text-ld" />
                      <span className="text-sm text-darklink">{item.view}</span>
                    </div>
                    <div className="flex gap-1 items-center ms-auto">
                      <TbPoint
                        size={15}
                        className="text-ld"
                      />{" "}
                      <span className="text-sm text-darklink">{item.time}</span>
                    </div>
                  </div>
                </div>
              </CardBox>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
};

export default BlogCardsCode;

Product Cards

Boat Headphone

$285

$375

MacBook Air Pro

$900

$650

Red Valvet Dress

$200

$150

Cute Soft Teddybear

$345

$285

"use client";
import React from "react";
/*--Products Cards Images--*/
import Link from "next/link";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";
import { Button, Rating, RatingStar } from "flowbite-react";
import { Icon } from "@iconify/react";
/*--Products Cards--*/
const productsCardData = [
  {
    title: "Boat Headphone",
    link: "/",
    photo: "/images/products/s2.jpg",
    salesPrice: 375,
    price: 285,
    rating: 4,
  },
  {
    title: "MacBook Air Pro",
    link: "/",
    photo: "/images/products/s5.jpg",
    salesPrice: 650,
    price: 900,
    rating: 5,
  },
  {
    title: "Red Valvet Dress",
    link: "/",
    photo: "/images/products/s8.jpg",
    salesPrice: 150,
    price: 200,
    rating: 3,
  },
  {
    title: "Cute Soft Teddybear",
    link: "/",
    photo: "/images/products/s11.jpg",
    salesPrice: 285,
    price: 345,
    rating: 2,
  },
];

const ProductsCards = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6">
        {productsCardData.map((item, i) => (
          <div className="lg:col-span-3 md:col-span-6 col-span-12" key={i}>
            <Link href={item.link} className="group">
              <CardBox className="p-0 overflow-hidden ">
                <div className="relative">
                  <Image src={item.photo} alt="materialm" width="1280" height="1280" />
                </div>
                <div className="px-6 pb-6 relative">
                  <button className="rounded-full z-1 absolute right-4 -top-8 bg-primary text-white flex justify-center items-center p-2 ">
                    <Icon icon="solar:bag-5-linear" height={24} width={24} className="w-6 h-6" />
                  </button>
                  <h3 className="text-lg mb-1">{item.title}</h3>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <p className="text-inherit">${item.price}</p>
                      <span className="text-sm font-medium line-through text-forest-black/60 dark:text-white/60">
                        ${item.salesPrice}
                      </span>
                    </div>
                    {item.rating == 5 ? (
                      <Rating size={"sm"}>
                        <RatingStar />
                        <RatingStar />
                        <RatingStar />
                        <RatingStar />
                        <RatingStar />
                      </Rating>
                    ) : item.rating == 4 ? (
                      <Rating size={"sm"}>
                        <RatingStar />
                        <RatingStar />
                        <RatingStar />
                        <RatingStar />
                        <RatingStar filled={false} />
                      </Rating>
                    ) : item.rating == 3 ? (
                      <Rating size={"sm"}>
                        <RatingStar />
                        <RatingStar />
                        <RatingStar />
                        <RatingStar filled={false} />
                        <RatingStar filled={false} />
                      </Rating>
                    ) : (
                      <Rating size={"sm"}>
                        <RatingStar />
                        <RatingStar />
                        <RatingStar filled={false} />
                        <RatingStar filled={false} />
                        <RatingStar filled={false} />
                      </Rating>
                    )}
                  </div>
                </div>
              </CardBox>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
};

export default ProductsCards;

Music Cards

Uptown Funk

Jon Bon Jovi

Blank Space

Madonna

Lean On

Jennifer Lopez

"use client";
import { Icon } from "@iconify/react";
import Image from "next/image";
import React from "react";
import CardBox from "../../../shared/CardBox";
/*--Music Cards--*/
const musicCard = [
  {
    title: "Uptown Funk",
    subheader: "Jon Bon Jovi",
    img: "/images/blog/blog-img4.jpg",
  },
  {
    title: "Blank Space",
    subheader: "Madonna",
    img: "/images/blog/blog-img5.jpg",
  },
  {
    title: "Lean On",
    subheader: "Jennifer Lopez",
    img: "/images/blog/blog-img3.jpg",
  },
];

const MusicCards = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6">
        {musicCard.map((item, i) => (
          <div className="lg:col-span-4 col-span-12" key={i}>
            <CardBox className="overflow-hidden p-0">
              <div className="grid grid-cols-12 gap-6">
                <div className="col-span-6 p-6">
                  <h3 className="text-lg ">{item.title}</h3>
                  <p className="text-darklink">{item.subheader}</p>
                  <div className="flex justify-between items-center pt-12 cursor-pointer" >
                    <Icon icon="tabler:player-skip-back" height={22} />
                    <Icon icon="tabler:player-play" className="text-error" height={20} />
                    <Icon icon="tabler:player-skip-forward" height={22} />
                  </div>
                </div>
                <div className="col-span-6">
                  <Image src={item.img} alt="tailwindadmin" className="h-full object-cover" width="1080" height="720" />
                </div>
              </div>
            </CardBox>
          </div>
        ))}
      </div>
    </>
  );
};

export default MusicCards;

Profile Cards

Andrew Grant

Sint Maarten

Leo Pratt

Bulgaria

Charles Nunez

Nepal

"use client";
import React from "react";
import Image from "next/image";
import { Button } from "flowbite-react";
import CardBox from "../../../shared/CardBox";
import { Icon } from "@iconify/react";
/*--Profile Cards--*/
const profilecards = [
  {
    title: "Andrew Grant",
    subtitle: "Sint Maarten",
    avatar: "/images/profile/user-6.jpg",
  },
  {
    title: "Leo Pratt",
    subtitle: "Bulgaria",
    avatar: "/images/profile/user-2.jpg",
  },
  {
    title: "Charles Nunez",
    subtitle: "Nepal",
    avatar: "/images/profile/user-3.jpg",
  },
];

const ProfileCards = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6">
        {profilecards.map((item, i) => (
          <div className="lg:col-span-4 col-span-12" key={i}>
            <CardBox>
              <div className="flex items-center">
                <Image
                  src={item.avatar}
                  alt="materialm"
                  className="h-10 w-10 rounded-full"
                  width={40}
                  height={40}
                />
                <div className="ms-3">
                  <p className="text-lg text-inherit">{item.title}</p>
                  <p className="text-xs text-darklink flex gap-1 items-center"><Icon icon="tabler:map-pin" height={15} /> {item.subtitle}</p>
                </div>
                <Button color={"primary"} className="w-fit ms-auto">
                  Follow
                </Button>
              </div>
            </CardBox>
          </div>
        ))}
      </div>
    </>
  );
};

export default ProfileCards;

User Cards

Andrew Grant

3 mutual friends

Leo Pratt

3 mutual friends

Charles Nunez

3 mutual friends

Lora Powers

3 mutual friends

"use client";
import React from "react";
import Image from "next/image";
import CardBox from "../../../shared/CardBox";
import { Button } from "flowbite-react";
const Usercards = [
  {
    title: "Andrew Grant",
    subtitle: "3 mutual friends",
    avatar: "/images/profile/user-6.jpg",
    userGroup: [
      {
        icon: "/images/profile/user-6.jpg",
      },
      {
        icon: "/images/profile/user-2.jpg",
      },
      {
        icon: "/images/profile/user-3.jpg",
      },
    ],
  },
  {
    title: "Leo Pratt",
    subtitle: "3 mutual friends",
    avatar: "/images/profile/user-2.jpg",
    userGroup: [
      {
        icon: "/images/profile/user-6.jpg",
      },
      {
        icon: "/images/profile/user-2.jpg",
      },
      {
        icon: "/images/profile/user-3.jpg",
      },
    ],
  },
  {
    title: "Charles Nunez",
    subtitle: "3 mutual friends",
    avatar: "/images/profile/user-3.jpg",
    userGroup: [
      {
        icon: "/images/profile/user-6.jpg",
      },
      {
        icon: "/images/profile/user-2.jpg",
      },
      {
        icon: "/images/profile/user-3.jpg",
      },
    ],
  },
  {
    title: "Lora Powers",
    subtitle: "3 mutual friends",
    avatar: "/images/profile/user-4.jpg",
    userGroup: [
      {
        icon: "/images/profile/user-6.jpg",
      },
      {
        icon: "/images/profile/user-2.jpg",
      },
      {
        icon: "/images/profile/user-3.jpg",
      },
    ],
  },
];

const UserCards = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6">
        {Usercards.map((item, i) => (
          <div className="lg:col-span-3 md:col-span-6 col-span-12" key={i}>
            <CardBox>
              <Image
                src={item.avatar}
                alt="materialm"
                className="h-20 w-20 rounded-full mb-4"
                height={80}
                width={80}
              />
              <p className="text-lg text-inherit">{item.title}</p>
              <div className="flex justify-start gap-2 items-center mb-4">
                <div className="flex ms-2">
                  {item.userGroup.map((user, index) => (
                    <div className="-ms-2  h-8 w-8" key={index}>
                      <Image
                        src={user.icon}
                        className="border-2 border-white dark:border-darkborder rounded-full h-8 w-8"
                        alt="icon"
                        height={32}
                        width={32}
                      />
                    </div>
                  ))}
                </div>
                <p className="text-sm text-daarklink">{item.subtitle}</p>
              </div>
              <div className="flex flex-col gap-4">
                <Button color={"primary"}>Add Friend</Button>
                <Button color={"secondary"}>Remove</Button>
              </div>
            </CardBox>
          </div>
        ))}
      </div>
    </>
  );
};

export default UserCards;

Social Cards

Andrew Grant

Technology Director

Leo Pratt

Telecom Analyst

Charles Nunez

Environmental Specialist

"use client";
import React from "react";
import {
  TbBrandFacebook,
  TbBrandGithub,
  TbBrandInstagram,
  TbBrandTwitter,
} from "react-icons/tb";
import Image from "next/image";
import Link from "next/link";
import CardBox from "../../../shared/CardBox";

const profileCards = [
  {
    title: "Andrew Grant",
    subtitle: "Technology Director",
    avatar: "/images/profile/user-6.jpg",
  },
  {
    title: "Leo Pratt",
    subtitle: "Telecom Analyst",
    avatar: "/images/profile/user-2.jpg",
  },
  {
    title: "Charles Nunez",
    subtitle: "Environmental Specialist",
    avatar: "/images/profile/user-3.jpg",
  },
];

/*--Social Cards--*/
const socialiconCard = [
  {
    icon: <TbBrandFacebook size={17} />,
    color: "primary",
  },
  {
    icon: <TbBrandInstagram size={17} />,
    color: "error",
  },
  {
    icon: <TbBrandGithub size={17} />,
    color: "info",
  },
  {
    icon: <TbBrandTwitter size={17} />,
    color: "secondary",
  },
];
const SocialCards = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6">
        {profileCards.map((item, i) => (
          <div
            className="lg:col-span-4  col-span-12 text-center"
            key={i}
          >
            <CardBox className="px-0 pb-4">
              <Image
                src={item.avatar}
                alt="materialm"
                className="h-20 w-20 rounded-full mx-auto"
                width={80}
                height={80}
              />
              <div>
                <p className="text-lg mt-3 text-inherit">{item.title}</p>
                <p className="text-xs text-darklink">{item.subtitle}</p>
              </div>
              <div className="flex justify-center gap-4 items-center border-t border-ld mt-4 pt-4">
                {socialiconCard.map((soc, index) => (
                  <Link href={""} className={`text-${soc.color}`} key={index}>{soc.icon}</Link>
                ))}
              </div>
            </CardBox>
          </div>
        ))}
      </div>
    </>
  );
};

export default SocialCards;

Settings Cards

Settings

Sound

45%

Chat

Turn on chat during call%

"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import { Button, Progress } from "flowbite-react";
import { ToggleSwitch } from "flowbite-react";
import { useState } from "react";
import { Icon } from "@iconify/react";
const SettingsCard = () => {
  const [switch1, setSwitch1] = useState(false);
  return (
    <>
      <CardBox>
        <h3 className="font-semibold text-lg text-inherit">Settings</h3>
        <div className="flex  gap-3 mt-3 border-b border-ld pb-4">
          <div>
            <div className="h-12 w-12 rounded-md bg-primary flex justify-center items-center text-white">
              <Icon icon="solar:volume-loud-outline" height={20} />
            </div>
          </div>
          <div className="w-full">
            <div className="flex justify-between items-center pb-2">
              <p className="text-base text-inherit">Sound</p>
              <p className="text-sm text-darklink">45%</p>
            </div>
            <Progress
              color="primary"
              progress={45}
              size={"md"}
              className="w-full"
            />
          </div>
        </div>
        <div className="flex  gap-3 mt-2 border-b border-ld items-center pb-4">
          <div>
            <div className="h-12 w-12 rounded-md bg-secondary flex justify-center items-center text-white">
              <Icon icon="tabler:message-2" height={20} />
            </div>
          </div>
          <div className="w-full">
            <div className="flex justify-between items-center">
              <div>
                <p className="text-base text-inherit">Chat</p>
                <p>Turn on chat during call%</p>
              </div>
              <ToggleSwitch
                checked={switch1}
                onChange={setSwitch1}
              />
            </div>
          </div>
        </div>
        <div className="flex justify-end gap-3 mt-2">
          <Button color={'lighterror'}>Cancel</Button>
          <Button color={'primary'}>Save</Button>
        </div>
      </CardBox>
    </>
  );
};

export default SettingsCard;

Gift Cards

Andrew Grant

Leo Pratt

"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import { Icon } from "@iconify/react";
import Image from "next/image";
import { Button } from "flowbite-react";

const GiftCards = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6">
        <div className="sm:col-span-6 col-span-12">
          <CardBox>
            <div className="flex items-center justify-between mb-3">
              <h3 className="card-title">Andrew Grant</h3>
              <Icon icon="solar:gift-outline" className="text-primary" height={20} />
            </div>
            <Image src="/images/products/s1.jpg" alt="maaterialm" className="rounded-lg w-full object-cover h-[150px]" width={300} height={150} />
            <Button color={'primary'} className="mt-4">Gift to Friend ($50.00)</Button>
          </CardBox>
        </div>
        <div className="sm:col-span-6 col-span-12">
          <CardBox>
            <div className="flex items-center justify-between mb-3">
              <h3 className="card-title">Leo Pratt </h3>
              <Icon icon="solar:gift-outline" className="text-primary" height={20} />
            </div>
            <Image src="/images/products/s2.jpg" alt="maaterialm" className="rounded-lg w-full object-cover h-[150px]" width={300} height={150} />
            <Button color={'primary'} className="mt-4">Gift to Friend ($50.00)</Button>
          </CardBox>
        </div>
      </div>
    </>
  );
};

export default GiftCards;

Upcomming Activity Cards

Upcoming Activity

In New year

Trip to singapore

working on

5 mins

Archived Data

working on

10 mins

Meeting with client

pending

10 mins

Screening Task Team

working on

20 mins

Send envelope to John

Done

20 mins

"use client";
import React from "react";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";

const UpcommingActCard = () => {
  const RecentTransData = [
    {
      img: "/images/svgs/icon-map-pin.svg",
      title: "Trip to singapore",
      subtitle: "working on",
      rank: "5 mins",
      bgcolor: "primary",
    },
    {
      img: "/images/svgs/icon-database.svg",
      title: "Archived Data",
      subtitle: "working on",
      rank: "10 mins",
      bgcolor: "primary",
    },
    {
      img: "/images/svgs/icon-phone.svg",
      title: "Meeting with client",
      subtitle: "pending",
      rank: "10 mins",
      bgcolor: "warning",
    },
    {
      img: "/images/svgs/icon-screen-share.svg",
      title: "Screening Task Team",
      subtitle: "working on",
      rank: "20 mins",
      bgcolor: "error",
    },
    {
      img: "/images/svgs/icon-mail.svg",
      title: "Send envelope to John",
      subtitle: "Done",
      rank: "20 mins",
      bgcolor: "success",
    },
  ];
  return (
    <>
      <CardBox className="pb-7">
        <div>
          <h3 className="card-title">Upcoming Activity</h3>
          <p className="card-subtitle">In New year</p>
        </div>
        <div className="mt-7 flex flex-col gap-6">
          {RecentTransData.map((item, index) => (
            <div className="flex gap-3.5 items-center" key={index}>
              <div
                className={`h-11 w-11 rounded-md flex justify-center items-center bg-light${item.bgcolor} dark:bg-dark${item.bgcolor}`}
              >
                <Image src={item.img} alt="icon" className="h-6 w-6" width={24} height={24} />
              </div>
              <div>
                <h4 className="text-base">{item.title}</h4>
                <p className="text-sm text-darklink">{item.subtitle}</p>
              </div>
              <div
                className={`ms-auto font-medium text-ld`}
              >
                {item.rank}
              </div>
            </div>
          ))}
        </div>
      </CardBox>
    </>
  );
};

export default UpcommingActCard;

Recent Transections Cards

Recent Transactions

09:30

Payment received from John Doe of $385.90

10:00

New sale recorded

#ML-3467

12:00

Payment was made of $64.95 to Michael

09:30

New sale recorded

#ML-3467

09:30

Project meeting

12:00

Payment received from John Doe of $385.90

"use client";
import Link from "next/link";
import CardBox from "../../../shared/CardBox";

const RecentTransactionData = [
  {
    title: "09:30 ",
    subtitle: "Payment received from John Doe of $385.90",
    textcolor: "primary",
    boldtext: false,
    line: true,
    link: "",
    url: "",
  },
  {
    title: "10:00 ",
    subtitle: "New sale recorded",
    textcolor: "warning",
    boldtext: true,
    line: true,
    link: "#ML-3467",
    url: "",
  },
  {
    title: "12:00 ",
    subtitle: "Payment was made of $64.95 to Michael",
    textcolor: "warning",
    boldtext: false,
    line: true,
    link: "",
    url: "",
  },
  {
    title: "09:30 ",
    subtitle: "New sale recorded",
    textcolor: "secondary",
    boldtext: true,
    line: true,
    link: "#ML-3467",
    url: "",
  },
  {
    title: "09:30 ",
    subtitle: "Project meeting",
    textcolor: "error",
    boldtext: true,
    line: true,
    link: "",
    url: "",
  },
  {
    title: "12:00 ",
    subtitle: "Payment received from John Doe of $385.90",
    textcolor: "primary",
    boldtext: false,
    line: false,
    link: "",
    url: "",
  },
];

const RecentTransactionCard = () => {
  return (
    <>
      <CardBox className="pb-4">
        <h3 className="card-title">Recent Transactions</h3>
        <div className="mt-6">
          {RecentTransactionData.map((item, i) => (
            <div className="flex gap-x-3" key={i}>
              <div className="w-1/6 text-end">
                <span className="text-ld font-medium text-sm  opacity-80">
                  {item.title}
                </span>
              </div>
              <div className="relative">
                <div className="relative z-10 w-7 h-5 flex justify-center items-center ">
                  <div
                    className={`h-3 w-3 rounded-full  bg-${item.textcolor}`}
                  ></div>
                </div>
                {item.line ? (
                  <div className="border-s border-ld h-full -mt-2 ms-3.5"></div>
                ) : (
                  <div className="border-0"></div>
                )}
              </div>
              <div className="w-1/4 grow pt-0.5 pb-5">
                {item.boldtext ? (
                  <p className="text-ld font-semibold">
                    {item.subtitle}
                  </p>
                ) : (
                  <p className="text-ld font-medium">
                    {item.subtitle}
                  </p>
                )}

                {item.link ? (
                  <Link href={item.url} className="text-primary text-sm">
                    {item.link}
                  </Link>
                ) : null}
              </div>
            </div>
          ))}
        </div>
      </CardBox>
    </>
  );
};

export default RecentTransactionCard;

Card Component Library

Top Cards

59

3,560

696

356

$96k

96

696

Component Code

Best Selling Product Card

Best Selling Products

MaterialPro

MaterialPro

Component Code

Payment Gatways Cards

Recent Transactions

PayPal Transfer

Wallet

Credit Card

Refund

Component Code

Blog Cards

Component Code

Product Cards

Boat Headphone

MacBook Air Pro

Red Valvet Dress

Cute Soft Teddybear

Component Code

Music Cards

Uptown Funk

Blank Space

Lean On

Component Code

Profile Cards

Component Code

User Cards

Component Code

Social Cards

Component Code

Settings Cards

Settings

Component Code

Gift Cards

Andrew Grant

Leo Pratt

Component Code

Upcomming Activity Cards

Upcoming Activity

Trip to singapore

Archived Data

Meeting with client

Screening Task Team

Send envelope to John

Component Code

Recent Transections Cards

Recent Transactions

Component Code