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 function ChipDefault() {
  return <Chip value="chip" />;
}

Chip Variants

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

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

Chip Sizes

The Chip component comes with 3 different sizes that you can change it using the size prop.

chip small
chip medium
chip large
import { Chip } from "@material-tailwind/react";
 
export function ChipSizes() {
  return (
    <div className="flex items-end gap-2">
      <Chip size="sm" value="chip small" />
      <Chip size="md" value="chip medium" />
      <Chip size="lg" value="chip large" />
    </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 function ChipColors() {
  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 Icon

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

account
account
account
account
import { Chip } from "@material-tailwind/react";
 
function Icon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
    >
      <path
        fillRule="evenodd"
        d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
        clipRule="evenodd"
      />
    </svg>
  );
}
 
export function ChipIcon() {
  return (
    <div className="flex gap-2">
      <Chip value="account" icon={<Icon />} />
      <Chip value="account" variant="gradient" icon={<Icon />} />
      <Chip value="account" variant="outlined" icon={<Icon />} />
      <Chip value="account" variant="ghost" icon={<Icon />} />
    </div>
  );
}

Chip Pills

You can pass tailwind css classes for the Chip component using the className prop this helps to do any sort of customization for the chip.

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

Chip with Status

This chip element example is perfect if you want to announce the status of a particular item, process, or person.

Online
Offline
import { Chip } from "@material-tailwind/react";
 
export function ChipWithStatus() {
  return (
    <div className="flex gap-2">
      <Chip
        variant="ghost"
        color="green"
        size="sm"
        value="Online"
        icon={
          <span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-green-900 content-['']" />
        }
      />
      <Chip
        variant="ghost"
        color="red"
        size="sm"
        value="Offline"
        icon={
          <span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-red-900 content-['']" />
        }
      />
    </div>
  );
}

Chip with Checkbox

Use this example to represent selectable items or options in a compact manner.

Online
Offline
import { Chip, Checkbox } from "@material-tailwind/react";
 
export function ChipWithCheckbox() {
  return (
    <div className="flex gap-2">
      <Chip
        value="Online"
        variant="ghost"
        color="green"
        icon={
          <Checkbox
            color="green"
            ripple={false}
            containerProps={{ className: "p-0" }}
            className="-ml-px border-2 border-green-900 before:hidden checked:border-green-900 checked:bg-green-900"
          />
        }
      />
      <Chip
        value="Offline"
        variant="ghost"
        color="red"
        icon={
          <Checkbox
            color="red"
            ripple={false}
            containerProps={{ className: "p-0" }}
            className="-ml-px border-2 border-red-900 before:hidden checked:border-red-900 checked:bg-red-900"
          />
        }
      />
    </div>
  );
}

Chip Dismissible

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

Dismissible
import React from "react";
import { Chip, Button } from "@material-tailwind/react";
 
export function ChipDismissible() {
  const [open, setOpen] = React.useState(true);
 
  return (
    <>
      {!open && (
        <Button className="absolute" onClick={() => setOpen(true)}>
          Show Chip
        </Button>
      )}
      <Chip open={open} value="Dismissible" onClose={() => setOpen(false)} />
    </>
  );
}

Chip Custom Animation

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

Custom Animation
import React from "react";
import { Chip, Button } from "@material-tailwind/react";
 
export function ChipCustomAnimation() {
  const [open, setOpen] = React.useState(true);
 
  return (
    <>
      {!open && (
        <Button className="absolute" onClick={() => setOpen(true)}>
          Show Chip
        </Button>
      )}
      <Chip
        open={open}
        animate={{
          mount: { y: 0 },
          unmount: { y: 50 },
        }}
        value="Custom Animation"
        onClose={() => setOpen(false)}
      />
    </>
  );
}

Chip with Avatar

Use the example below for a chip containing an avatar.

Tania Andrew

Tania Andrew

import { Chip, Avatar, Typography } from "@material-tailwind/react";
 
export function ChipWithAvatar() {
  return (
    <Chip
      icon={
        <Avatar
          size="xs"
          variant="circular"
          className="h-full w-full -translate-x-0.5"
          alt="Tania Andrew"
          src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
        />
      }
      value={
        <Typography
          variant="small"
          color="white"
          className="font-medium capitalize leading-none"
        >
          Tania Andrew
        </Typography>
      }
      className="rounded-full py-1.5"
    />
  );
}

Chip Props

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

AttributeTypeDescriptionDefault
variantVariantChange chip variantfilled
colorColorChange chip colorgray
valuenodeAdd content for chipNo default value it's a required prop.
onClosefuncCallback for closing the chip componentundefined
actionnodeChange the onClose action buttonundefined
openbooleanChange chip visibilitytrue
animateAnimateChange chip animationundefined
iconnodeAdd icon at the beginning of chipundefined
classNamestringAdd custom className for chip''


For TypeScript Only

import type { ChipProps } from "@material-tailwind/react";

Types - Variant

type variant = "filled" | "gradient" | "outlined" | "ghost";

Types - Color

type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

Types - Animate

type animate = {
  mount?: object;
  unmount?: object;
};

Chip Theme

Learn how to customize the theme and styles for chip component, the theme object for chip component has three main objects:

A. The defaultProps object for setting up the default value for props of chip component.
B. The valid object for customizing the valid values for chip component props.
C. The styles object for customizing the theme and styles of chip component.

You can customize the theme and styles of chip component by adding Tailwind CSS classes as key paired values for objects.



Chip Theme Object Type

interface ChipStylesType {
  defaultProps: {
    variant: string;
    color: string;
    icon: node;
    open: boolean;
    action: node;
    onClose: func;
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  valid: {
    variants: string[];
    colors: string[];
  };
  styles: {
    base: {
      chip: object;
      action: object;
    };
    variants: {
      filled: object;
      gradient: object;
      outlined: object;
      ghost: object;
    };
  };
}


For TypeScript Only

import { ChipStylesType } from "@material-tailwind/react";

Chip Theme Customization

const theme = {
  chip: {
    defaultProps: {
      variant: "filled",
      size: "md",
      color: "blue",
      icon: undefined,
      open: true,
      onClose: undefined,
      action: undefined,
      animate: {
        unmount: {},
        mount: {},
      },
      className: "",
    },
    valid: {
      variants: ["filled", "gradient", "outlined", "ghost"],
      sizes: ["sm", "md", "lg"],
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        chip: {
          position: "relative",
          display: "grid",
          placeItems: "items-center",
          fontFamily: "font-sans",
          fontWeight: "font-bold",
          textTransform: "uppercase",
          lineHeight: "leading-none",
          whiteSpace: "whitespace-nowrap",
          userSelect: "select-none",
        },
        action: {
          position: "!absolute",
          top: "top-2/4",
          right: "right-1",
          translate: "-translate-y-2/4",
          mx: "mx-px",
          rounded: "rounded-md",
        },
        icon: {
          position: "absolute",
          top: "top-2/4",
          translate: "-translate-y-2/4",
        },
      },
      sizes: {
        sm: {
          chip: {
            py: "py-1",
            px: "px-2",
            fontSize: "text-xs",
            borderRadius: "rounded-md",
          },
          action: {
            width: "w-4",
            height: "h-4",
          },
          icon: {
            width: "w-4",
            height: "h-4",
            left: "left-1",
          },
        },
        md: {
          chip: {
            py: "py-1.5",
            px: "px-3",
            fontSize: "text-xs",
            borderRadius: "rounded-lg",
          },
          action: {
            width: "w-5",
            height: "h-5",
          },
          icon: {
            width: "w-5",
            height: "h-5",
            left: "left-1.5",
          },
        },
        lg: {
          chip: {
            py: "py-2",
            px: "px-4",
            fontSize: "text-xs",
            borderRadius: "rounded-lg",
          },
          action: {
            width: "w-6",
            height: "h-6",
          },
          icon: {
            width: "w-6",
            height: "h-6",
            left: "left-1.5",
          },
        },
      },
      variants: {
        filled: {
          "blue-gray": {
            backgroud: "bg-blue-gray-500",
            color: "text-white",
          },
          gray: {
            backgroud: "bg-gray-500",
            color: "text-white",
          },
          brown: {
            backgroud: "bg-brown-500",
            color: "text-white",
          },
          "deep-orange": {
            backgroud: "bg-deep-orange-500",
            color: "text-white",
          },
          orange: {
            backgroud: "bg-orange-500",
            color: "text-white",
          },
          amber: {
            backgroud: "bg-amber-500",
            color: "text-black",
          },
          yellow: {
            backgroud: "bg-yellow-500",
            color: "text-black",
          },
          lime: {
            backgroud: "bg-lime-500",
            color: "text-black",
          },
          "light-green": {
            backgroud: "bg-light-green-500",
            color: "text-white",
          },
          green: {
            backgroud: "bg-green-500",
            color: "text-white",
          },
          teal: {
            backgroud: "bg-teal-500",
            color: "text-white",
          },
          cyan: {
            backgroud: "bg-cyan-500",
            color: "text-white",
          },
          "light-blue": {
            backgroud: "bg-light-blue-500",
            color: "text-white",
          },
          blue: {
            backgroud: "bg-blue-500",
            color: "text-white",
          },
          indigo: {
            backgroud: "bg-indigo-500",
            color: "text-white",
          },
          "deep-purple": {
            backgroud: "bg-deep-purple-500",
            color: "text-white",
          },
          purple: {
            backgroud: "bg-purple-500",
            color: "text-white",
          },
          pink: {
            backgroud: "bg-pink-500",
            color: "text-white",
          },
          red: {
            backgroud: "bg-red-500",
            color: "text-white",
          },
        },
        gradient: {
          "blue-gray": {
            backgroud: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
            color: "text-white",
          },
          gray: {
            backgroud: "bg-gradient-to-tr from-gray-600 to-gray-400",
            color: "text-white",
          },
          brown: {
            backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400",
            color: "text-white",
          },
          "deep-orange": {
            backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400",
            color: "text-white",
          },
          orange: {
            backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400",
            color: "text-white",
          },
          amber: {
            backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400",
            color: "text-black",
          },
          yellow: {
            backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400",
            color: "text-black",
          },
          lime: {
            backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400",
            color: "text-black",
          },
          "light-green": {
            backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400",
            color: "text-white",
          },
          green: {
            backgroud: "bg-gradient-to-tr from-green-600 to-green-400",
            color: "text-white",
          },
          teal: {
            backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400",
            color: "text-white",
          },
          cyan: {
            backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400",
            color: "text-white",
          },
          "light-blue": {
            backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400",
            color: "text-white",
          },
          blue: {
            backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
            color: "text-white",
          },
          indigo: {
            backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400",
            color: "text-white",
          },
          "deep-purple": {
            backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400",
            color: "text-white",
          },
          purple: {
            backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400",
            color: "text-white",
          },
          pink: {
            backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400",
            color: "text-white",
          },
          red: {
            backgroud: "bg-gradient-to-tr from-red-600 to-red-400",
            color: "text-white",
          },
        },
        outlined: {
          "blue-gray": {
            border: "border border-blue-gray-500",
            color: "text-blue-gray-700",
          },
          gray: {
            border: "border border-gray-500",
            color: "text-gray-700",
          },
          brown: {
            border: "border border-brown-500",
            color: "text-brown-700",
          },
          "deep-orange": {
            border: "border border-deep-orange-500",
            color: "text-deep-orange-700",
          },
          orange: {
            border: "border border-orange-500",
            color: "text-orange-700",
          },
          amber: {
            border: "border border-amber-500",
            color: "text-amber-700",
          },
          yellow: {
            border: "border border-yellow-500",
            color: "text-yellow-700",
          },
          lime: {
            border: "border border-lime-500",
            color: "text-lime-700",
          },
          "light-green": {
            border: "border border-light-green-500",
            color: "text-light-green-700",
          },
          green: {
            border: "border border-green-500",
            color: "text-green-700",
          },
          teal: {
            border: "border border-teal-500",
            color: "text-teal-700",
          },
          cyan: {
            border: "border border-cyan-500",
            color: "text-cyan-700",
          },
          "light-blue": {
            border: "border border-light-blue-500",
            color: "text-light-blue-700",
          },
          blue: {
            border: "border border-blue-500",
            color: "text-blue-700",
          },
          indigo: {
            border: "border border-indigo-500",
            color: "text-indigo-700",
          },
          "deep-purple": {
            border: "border border-deep-purple-500",
            color: "text-deep-purple-700",
          },
          purple: {
            border: "border border-purple-500",
            color: "text-purple-700",
          },
          pink: {
            border: "border border-pink-500",
            color: "text-pink-700",
          },
          red: {
            border: "border border-red-500",
            color: "text-red-700",
          },
        },
        ghost: {
          "blue-gray": {
            backgroud: "bg-blue-gray-500/20",
            color: "text-blue-gray-900",
          },
          gray: {
            backgroud: "bg-gray-500/20",
            color: "text-gray-900",
          },
          brown: {
            backgroud: "bg-brown-500/20",
            color: "text-brown-900",
          },
          "deep-orange": {
            backgroud: "bg-deep-orange-500/20",
            color: "text-deep-orange-900",
          },
          orange: {
            backgroud: "bg-orange-500/20",
            color: "text-orange-900",
          },
          amber: {
            backgroud: "bg-amber-500/20",
            color: "text-amber-900",
          },
          yellow: {
            backgroud: "bg-yellow-500/20",
            color: "text-yellow-900",
          },
          lime: {
            backgroud: "bg-lime-500/20",
            color: "text-lime-900",
          },
          "light-green": {
            backgroud: "bg-light-green-500/20",
            color: "text-light-green-900",
          },
          green: {
            backgroud: "bg-green-500/20",
            color: "text-green-900",
          },
          teal: {
            backgroud: "bg-teal-500/20",
            color: "text-teal-900",
          },
          cyan: {
            backgroud: "bg-cyan-500/20",
            color: "text-cyan-900",
          },
          "light-blue": {
            backgroud: "bg-light-blue-500/20",
            color: "text-light-blue-900",
          },
          blue: {
            backgroud: "bg-blue-500/20",
            color: "text-blue-900",
          },
          indigo: {
            backgroud: "bg-indigo-500/20",
            color: "text-indigo-900",
          },
          "deep-purple": {
            backgroud: "bg-deep-purple-500/20",
            color: "text-deep-purple-900",
          },
          purple: {
            backgroud: "bg-purple-500/20",
            color: "text-purple-900",
          },
          pink: {
            backgroud: "bg-pink-500/20",
            color: "text-pink-900",
          },
          red: {
            backgroud: "bg-red-500/20",
            color: "text-red-900",
          },
        },
      },
    },
  },
};

Explore More Tailwind CSS Examples

Check out more chip component examples from Material Tailwind Blocks.