Tailwind CSS Chip - React

Use our Chip component based on React and Tailwind CSS for actions in forms, dialogues, and more.

Chip is an essential element of web design. Basically, Chip is styled links that grab the user's attention. They help users navigate our websites or apps and drive them to a particular action like submitting a contact form or placing an order as easy as possible.

See below our Chip example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

---

#Chip Demo

Here's how to implement a simple Chip component. It can be used for actions in forms, dialogues, and more.

---

#Chip Sizes

We provide different chip sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the chip size.

In the example below, we've showcased the different chip sizes that you can use in your project.

---

#Chip Variants

We provides different chip variants like ghost, outline, solid, and gradient so you can adapt it easily to your needs. You can simply use the variant prop to change the chip variant.

In the example below, we've showcased the different chip variants that you can use in your project.

---

#Chip Colors

We provide different chip colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the chip color.

In the example below, we've showcased the different chip colors that you can use in your project.

---

#Chip Icon

You can add an icon for the Chip component to make it more visually appealing and informative. Use the example below to create chips with icon.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

---

#Chip Dismissible

You can use Chip.DismissTrigger component to add a close button to your chip for better user experience. Use the example below to create a dismissible chip.

---

#Chip with Avatar

You can add an avatar for the Chip component to make it more visually appealing and informative. Use the example below to create Chip with Avatar component.

---

#Chip Rounded

By default Chip comes with a pill shape. If you prefer a rounded shape, you can set the isPill prop to false. Use the example below to create a rounded Chip component.