Chip

A component used to display some sort of indicator on another component.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add chip

Usage

Basic

Size

Pass a size to the size prop to change the size of the chip.

Color

You can change the color of the chip by passing any tailwind color bg class to the color prop.

Text

You can display a text inside the chip by passing a string to the text prop.

3

Inset

The inset prop can be used to move the indicator closer to the element.