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 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 default function Example() {
  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 variant prop.

chip small

chip medium

chip large

import { Chip } from "@material-tailwind/react";
 
export default function Example() {
  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 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 Example() {
  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.

account

import { Chip } from "@material-tailwind/react";
import { UserCircleIcon } from "@heroicons/react/24/solid";
 
export default function Example() {
  return (
    <div className="flex gap-2">
      <Chip value="account" icon={<UserCircleIcon />} />
      <Chip value="account" variant="gradient" icon={<UserCircleIcon />} />
      <Chip value="account" variant="outlined" icon={<UserCircleIcon />} />
      <Chip value="account" variant="ghost" icon={<UserCircleIcon />} />
    </div>
  );
}

Pills Chip

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.

pills chip

import { Chip } from "@material-tailwind/react";
 
export default function Example() {
  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 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 default function Example() {
  return (
    <div className="flex gap-2">
      <Chip
        variant="ghost"
        color="green"
        size="sm"
        value="Online"
        icon={<span className="content-[''] block w-2 h-2 rounded-full mx-auto mt-1 bg-green-900" />}
      />
      <Chip
        variant="ghost"
        color="red"
        size="sm"
        value="Offline"
        icon={<span className="content-[''] block w-2 h-2 rounded-full mx-auto mt-1 bg-red-900" />}
      />
    </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 default function Example() {
  return (
    <div className="flex gap-2">
      <Chip
        value="Online"
        variant="ghost"
        color="green"
        icon={
          <Checkbox 
            color="green"
            ripple={false}
            containerProps={{ className: "p-0" }}
            className="border-green-900 border-2 checked:bg-green-900 checked:border-green-900 -ml-px before:hidden"
          />
        }
      />
      <Chip
        value="Offline"
        variant="ghost"
        color="red"
        icon={
          <Checkbox 
            color="red"
            ripple={false}
            containerProps={{ className: "p-0" }}
            className="border-red-900 border-2 checked:bg-red-900 checked:border-red-900 -ml-px before:hidden"
          />
        }
      />
    </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, Button } from "@material-tailwind/react";
 
export default function Example() {
  const [open, setOpen] = useState(true);
 
return (
 
<Fragment>
  {!open && (
    <Button className="absolute" onClick={() => setOpen(true)}>
      Show Chip
    </Button>
  )}
  <Chip open={open} value="Dismissible" onClose={() => setOpen(false)} />
</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 Example() {
  const [open, setOpen] = useState(true);
 
  return (
    <Fragment>
      {!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)}
      />
    </Fragment>
  );
}

Chip with Avatar

Use the example below for a chip containing an avatar.

Candice Wu

import { Chip, Avatar, Typography } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Chip
      icon={
        <Avatar
          size="xs"
          variant="circular"
          className="w-full h-full -translate-x-0.5"
          alt="candice wu"
          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"
        >
          Candice Wu
        </Typography>
      }
      color="teal"
      className="rounded-full py-1.5"
    />
  );
}

Props

Learn more about props definition and types of chip component.

Theme

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

checkbox

collapse

Edit this page on Github