Getting Started

Installation Delete Account Card Minimal Business Card Creator Card Reel Style Card Message Card Tooltip Image Link Tooltip Team People Gradient Card Hover 3d Card Search Card Notification Card Blur Card

Cards

Versatile card components for displaying content, products, and information with hover effects and responsive design.

Installation

Quick guide to setup the component

1. Copy and paste this into the terminal to install the required dependencies.

Terminal

Copied!

npm i clsx tailwind-merge react-icons

npm i clsx tailwind-merge react-icons

2. Create /lib folder, then create the file utils.ts. Copy and paste this inside of it.

lib/utils.ts

Copied!

1import { ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

1import { ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

Delete Account Card

Interactive delete account modal with customizable color themes

Choose Color

Delete Account

Are you sure you want to delete your account?

Minimal Business Card

Clean business card with profile info and social media links

John Doe

Founder of Company

New York, USA

@johndoe

YouTube

@johndoechannel

Instagram

@johndoe_official

TikTok

@johndoe

Creator Card

Modern creator profile card with stats and contact button

Alexander Ross

Next.js Developer

React Expert

4.9

rating

$35k+

earned

$45/hr

rate

Reel Style Card

Reel-style card with author info, background image, and content preview - perfect for video content and blogs

John Doe

2 min ago

Fun Fact about New York

Explore the hidden gems of New York City.
#NewYork

Message Card

Clean message notification card with action buttons

New message from Alex

5 min ago

Hi there! Just checking in about the project status.

Gradient Card

Gradient showcase card with dark/light mode support and technology icons

Tool Gradient Card

A card that showcases a set of tools with nice gradients.

Hover 3d Card

Interactive 3D hover card with mouse tracking and visual effects

Hover me!
And play with the mouse!

Search Card

Interactive search card with recent searches and quick actions

Suggestions

Calendar

Search File

Calculator

Settings

Profile

Billing

Notification Card

Clean notification card with unread indicators and action buttons

Notifications

New Lead Generated

John Smith submitted web form

10 minutes ago

Campaign Milestone

Black Friday campaign hit 150% target

3 days ago

Live Chat Interaction

John Smith submitted web form

4 days ago

Blur Card

Beautiful blur card with mountain background and location info

Lofoten,

Norway

More Components Coming Soon

We're constantly adding new components to help you build faster.

More coming soon! 🚀

Have a specific component in mind? I'd love to build it for you.

Request a component →

Component Development

Need custom React components for your project? Get in touch

I've built hundreds of components, and helped developers and teams create beautiful, reusable UI components.

Custom React components withTypeScript support
Beautiful styling withTailwind CSS
Fully tested and documented components ready to use

Perfect for development teams, agencies, or anyone needing custom UI components.

Ready to enhance your component library?

Reach out to me →

DP's Templates

Access an ever-growing collection of premium, meticulously crafted templates and component packs for modern web and mobile development. Built by Emanuele Di Pietro.

Cards

Installation

Delete Account Card

Delete Account

Minimal Business Card

John Doe

@johndoe

@johndoechannel

@johndoe_official

@johndoe

Creator Card

Alexander Ross

Reel Style Card

John Doe

Fun Fact about New York

Message Card

New message from Alex

Tooltip Image Link

Tooltip Team People

Gradient Card

Tool Gradient Card

Hover 3d Card

Hover me!And play with the mouse!

Search Card

Suggestions

Settings

Notification Card

Notifications

New Lead Generated

Campaign Milestone

Live Chat Interaction

Blur Card

Lofoten,

More Components Coming Soon

More coming soon! 🚀

Component Development

Need custom React components for your project? Get in touch

DP's Templates

Hover me!
And play with the mouse!