Skip to content

Latest commit

 

History

History
982 lines (893 loc) · 25.4 KB

File metadata and controls

982 lines (893 loc) · 25.4 KB
title description navigation github prev next
Tailwind CSS Chips for React - Material Tailwind
Customise your web projects with our easy-to-use chips component for Tailwind CSS and React using Material Design guidelines.
chip
chip-variants
chip-sizes
chip-colors
chip-icon
chip-pills
chip-with-status
chip-with-checkbox
chip-dismissible
chip-custom-animation
chip-with-avatar
chip-props
types-variant
types-color
types-animate
chip-theme
chip-theme-object-type
chip-theme-customization
chip
checkbox
collapse
# 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.


<CodePreview link="chip#chip" component={<ChipExamples.ChipDefault />}>

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.

<CodePreview link="chip#chip-variants" component={<ChipExamples.ChipVariants />}>

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.

<CodePreview component={<ChipExamples.ChipSizes />}>

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.

<CodePreview link="chip#chip-colors" component={<ChipExamples.ChipColors />}>

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.

<CodePreview link="chip#chip-icon" component={<ChipExamples.ChipIcon />}>

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.

<CodePreview component={<ChipExamples.ChipPills />}>

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.

<CodePreview component={<ChipExamples.ChipWithStatus />}>

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.

<CodePreview component={<ChipExamples.ChipWithCheckbox />}>

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.

<CodePreview link="chip#chip-dismissible" component={<ChipExamples.ChipDismissible />}>

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.

<CodePreview component={<ChipExamples.ChipCustomAnimation />}>

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.

<CodePreview link="chip#chip-with-avatar" component={<ChipExamples.ChipWithAvatar />}>

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.

Attribute Type Description Default
variant Variant Change chip variant filled
color Color Change chip color gray
value node Add content for chip No default value it's a required prop.
onClose func Callback for closing the chip component undefined
action node Change the onClose action button undefined
open boolean Change chip visibility true
animate Animate Change chip animation undefined
icon node Add icon at the beginning of chip undefined
className string Add 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",
          },
        },
      },
    },
  },
};