Chips

Flexible chips, badges and labels components for status indicators, categories, and information display with various styles.

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}

Filter Chip

Filter chip with count and close button

Filter

Status Badge

Status badge with different states and colors

Success

Online Status Badge

Online & Offline status badge with pulsing circle

1 developer online

Frame Label

Elegant label with corner dots and dotted border, perfect for highlighting content

components

Crypto Label

Crypto label with Bitcoin icon and trend indicators

Bitcoin+12.5%

Soft Label

Soft label with icon and text, perfect for reviews or tags.

Reviews

Coming Soon Label

Coming Soon label that indicates the release

Launching our product in Q3

Coming soon

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.