Say Hello!
Send us your questions or customization on demand requests
We used to reply ASAP
Become an affiliate and earn up to 50%
You can participate in Setproduct partnership program and earn up to 50% from every sale you made
We used to reply ASAP
  • Visual effects enhanced for a chip to provide convenient feedback when a user interacts with the item.
  • Smooth animation implemented for an Active chip, when clicked. Simple Check icon appears slightly and disappears after second tap or click. The content is pushed and slides to the right.
  • Mobile & Web styles are available. It's recommended to use Rounded chip for a variety of cases, but in additional Square chips are your best fit for dense desktop layout.
  • Variants of Chips purposes as: Text-only, Closable, Contact, Icon Chip and Chip with implemented Counter.
  • Groups of chips available. Choose between Rounded for mobile or Square for desktop applications.

Chips UI for React

FILLED CHIPS

material react ui chips
Default Material style for impact filtering flows. Each chip gets lifted up while onHovered. And toggles into Selected mode after a single click.
Implementation for Filled Chips
Available in styles:
.chipSmoothDark, .chipSmoothBlue, .chipSmoothRed, .chipSmoothGreen, .chipSmoothYellow
.chipSmoothContactDark, .chipSmoothContactBlue, .chipSmoothContactRed, .chipSmoothContactGreen, .chipSmoothContactYellow
.chipIconDark, .chipIconBlue, .chipIconRed, .chipIconGreen, .chipIconYellow
.chipSmoothBadgesDark, .chipSmoothBadgesBlue, .chipSmoothBadgesRed, .chipSmoothBadgesGreen, .chipSmoothBadgesYellow
import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import { Cancel } from '@material-ui/icons';
...
<Chips className="chipSmoothDark" Checked >
   Smooth
   <span><Cancel/></span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsUserpic.css';
import avatar from './components/assets/img/avatar.svg';
...
<Chips className="chipSmoothContactDark">
   <img src={avatar}/>
   <span>Mr. Userpic</span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsIcon.css';
import { Favorite } from '@material-ui/icons';
...
<Chips className="chipIconDark">
   <span><Favorite/></span>
   Icon Chip
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsBadges.css';
...
<Chips
   className="chipSmoothBadgesDark"
      badges="divChipsBadgeDark" value="16" >
   Categories
</Chips>

OUTLINED CHIPS

material react ui chips outline
Implemented in this Material theme as an alternative style to display chips with less Impactful meaning. Styled with a bolder border when onHovered.
Implementation for Outlined Chips
Available in styles:
.chipOutlinedDark, .chipOutlinedBlue, .chipOutlinedRed, .chipOutlinedGreen, .chipOutlinedYellow
.chipOutlinedContactDark, .chipOutlinedContactBlue, .chipOutlinedContactRed, .chipOutlinedContactGreen, .chipOutlinedContactYellow
.chipOutlinedIconDark, .chipOutlinedIconBlue, .chipOutlinedIconRed, .chipOutlinedIconGreen, .chipOutlinedIconYellow
.chipOutlinedBadgesDark, .chipOutlinedBadgesBlue, .chipOutlinedBadgesRed, .chipOutlinedBadgesGreen, .chipOutlinedBadgesYellow
import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import { Cancel } from '@material-ui/icons';
...
<Chips className="chipOutlinedDark">
   Smooth
   <span><Cancel/></span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsUserpic.css';
import avatar from './components/assets/img/avatar.svg';
...
<Chips className="chipOutlinedContactDark" Checked >
   <img src={avatar}/>
   <span>Mr. Userpic</span>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsIcon.css';
import { AccessTime } from '@material-ui/icons';
    ...
<Chips className="chipOutlinedIconDark">
   <span><AccessTime/></span>
   Icon Chip
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsBadges.css';
<Chips
   className="chipOutlinedBadgesDark"
      badgesOut="divChipsOutlinedBadgeDark" value="16" >
   Categories
</Chips>

SQUARE CHIPS

material react ui chips outline
A variant of dense chips especially recommended for using in detailed and complicated web or desktop software.
Implementation for Square Chips
Available in styles:
.chipDefDarkRight, .chipDefBlueRight, .chipDefRedRight, .chipDefGreenRight, .chipDefYellowRight
.chipDefDarkLeft .chipDefBlueLeft, .chipDefRedLeft, .chipDefGreenLeft, .chipDefYellowLeft
.chipDefDarkSmall, .chipDefBlueSmall, .chipDefRedSmall, .chipDefGreenSmall, .chipDefYellowSmall
.chipDefOutlinedDarkRight, .chipDefOutlinedBlueRight, .chipDefOutlinedRedRight, .chipDefOutlinedGreenRight, .chipDefOutlinedYellowRight
.chipDefOutlinedDarkLeft, .chipDefOutlinedBlueLeft, .chipDefOutlinedRedLeft, .chipDefOutlinedGreenLeft, .chipDefOutlinedYellowLeft
.chipDefOutlinedDarkSmall, .chipDefOutlinedBlueSmall, .chipDefOutlinedRedSmall, .chipDefOutlinedGreenSmall, .chipDefOutlinedYellowSmall

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Close } from '@material-ui/icons';
...
<Chips className="chipDefDarkRight">
   Smooth<Close/>
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipDefDarkLeft">
   <Done/>Checked
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
<Chips className="chipDefDarkSmall" Checked >
   <span>16</span> Items
</Chips>

/*Outlined*/
    
import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Close } from '@material-ui/icons';
...
<Chips className="chipDefOutlinedDarkRight">
   Smooth <Close/>
/Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipDefOutlinedDarkLeft">
   <Done/>Checked
</Chips>

import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
...
<Chips className="chipDefOutlinedDarkSmall">
   <span>16</span> Items
</Chips>

CHIPS GROUP: OUTLINE

material react ui chips outline
Production-ready group component made of simple outlined chips for default selection
Implementation for Group Outline
Available in styles: same as listed above
import Chips from './components/Chips.js';
import './components/assets/ChipsIcon.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipOutlinedIconBlueAnim">
   <span><Done/></span>badminton
</Chips>

CHIPS GROUP: CONTACTS

material react ui chips contacts
Predefined combination of Chips for every case when a user interacts with selection or filtering for a group of Contacts.
Implementation for Group Contacts
Available in styles: same as listed above
import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import avatar from './components/assets/img/avatar.svg';
...
<Chips className="chipSmoothContactDark">
   <img src={avatar}/>
      <span>Mr. Userpic</span>
</Chips>

CHIPS GROUP: DELETION

material react ui chips delete
In some cases Delete functionality for every chip in a group is required.
Implementation for Group Deletion
Available in styles: same as listed above
import Chips from './components/Chips.js';
import './components/assets/Chips.css';
import { Cancel } from '@material-ui/icons';
...
<Chips
   className="chipSmoothDark"
      Close icon={<Cancel/>}>
      Lucas Schultz
</Chips>

CHIPS GROUP: SQUARE

material react ui chips delete
All combinations listed above available in dense Square Chips styled for the optimal performance within desktop resolutions
Implementation for Group Square
Available in styles: same as listed above
import Chips from './components/Chips.js';
import './components/assets/ChipsDef.css';
import { Done } from '@material-ui/icons';
...
<Chips className="chipDefDarkLeftAnim">
   <Done/>Soccer
</Chips>