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
import { Chip } from "@material-tailwind/react";
 
export default function Example() {
  return <Chip value="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, below there are some examples of the colors but you can check all of the them here.

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 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 } 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>
  );
}

Props

The following props are available for the button component. These are the custom props that come with we've added for the chip component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
variantVariantChange chip variantfilled
colorColorChange chip colorblue
valueValueAdd content for chipNo default value its a required prop.
dismissibleDismissibleMakes the chip dismissibleundefined
animateAnimateChange chip animationundefined
showbooleanChange the chip visibilitytrue
iconnodeAdd icon at the beginning of chipundefined
classNamestringAdd custom className for chip''

Types

type variant = "filled" | "gradient";
type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";
type value = string | number;
type dismissible = {
  action?: ReactNode;
  onClose: () => void;
};
type animate = {
  mount?: Object;
  unmount?: Object;
};
Edit this page on Github