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

import { Chip } from "@material-tailwind/react";
 
export default function Variants() {
  return (
    <div className="flex gap-2">
      <Chip variant="filled" value="chip filled" />
      <Chip variant="gradient" value="chip gradient" />
    </div>
  );
}

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

import { Chip } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex gap-2">
      <Chip color="blue" value="blue" />
      <Chip color="red" value="red" />
      <Chip color="green" value="green" />
      <Chip color="amber" value="amber" />
      <Chip color="pink" value="pink" />
      <Chip color="indigo" value="indigo" />
      <Chip color="purple" value="purple" />
      <Chip color="teal" value="teal" />
      <Chip color="cyan" value="cyan" />
    </div>
  );
}

Chip with Icon

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

downloads

import { Chip } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Chip
      value="downloads"
      icon={
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z" />
        </svg>
      }
    />
  );
}

Chip Dismissible

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

Dismissible

import { useState, Fragment } from "react";
import { Chip, Button } from "@material-tailwind/react";
 
export default function Dismissible() {
  const [show, setShow] = useState(true);
 
  return (
    <Fragment>
      {!show && (
        <Button
          variant="gradient"
          className="absolute"
          onClick={() => setShow(true)}
        >
          Show Chip
        </Button>
      )}
      <Chip
        variant="gradient"
        show={show}
        dismissible={{
          onClose: () => setShow(false),
        }}
        value="Dismissible"
      />
    </Fragment>
  );
}

Custom Chip Animation

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

Custom Animation

import { useState, Fragment } from "react";
import { Chip, Button } from "@material-tailwind/react";
 
export default function Colors() {
  const [show, setShow] = useState(true);
 
  return (
    <Fragment>
      {!show && (
        <Button
          variant="gradient"
          className="absolute"
          onClick={() => setShow(true)}
        >
          Show Chip
        </Button>
      )}
      <Chip
        variant="gradient"
        show={show}
        animate={{
          mount: { y: 0 },
          unmount: { y: 50 },
        }}
        dismissible={{
          onClose: () => setShow(false),
        }}
        value="Custom Animation"
      />
    </Fragment>
  );
}

Props

Learn more about props definition and types of chip component.

Theme

Learn how to customize the theme and styles for chip component.

checkbox

dialog

Edit this page on Github