Tailwind CSS Chip - React

Get started on your web projects with our Tailwind CSS Chip which is a compact elements that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions.

See below our simple Chip component example that you can use for 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

Chip Variants

The Chip component comes with 2 different variants that you can change it using the variant prop.

chip filled
chip gradient

Chip Colors

The Chip component comes with 19 different colors that you can change it using the color prop.

blue
red
green
amber
pink
indigo
purple
teal
cyan

Chip with Icon

You can add an icon at the beginning of Chip component using the icon prop.

downloads

Chip Dismissible

The Chip component is a dismissible component that you can control it using the dismissible and show props.

Dismissible

Custom Chip Animation

You can modify the open/close state animation for Chip component using the animate prop.

Custom Animation
Edit this page on Github