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.

Attribute	Type	Description	Default
`variant`	Variant	Change chip variant	`filled`
`color`	Color	Change chip color	`blue`
`value`	Value	Add content for chip	No default value its a required prop.
`dismissible`	Dismissible	Makes the chip dismissible	`undefined`
`animate`	Animate	Change chip animation	`undefined`
`show`	`boolean`	Change the chip visibility	`true`
`icon`	`node`	Add icon at the beginning of chip	`undefined`
`className`	`string`	Add 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;
};

checkbox

dialog