jelly chip

preview

removable

reacttypescripttailwindnext.jsjelly ui

selectable

usage

Use selected chips for filters or removable chips for a lightweight list of tags.

import { JellyChip } from "@/components/jelly/jelly-chip"

export function DesignFilter() {
  return <JellyChip color="pink" selected onClick={() => {}}>design</JellyChip>
}

setup notes

Requires React, TypeScript, Tailwind CSS, and the included cn helper.

Add the wiggle animation for clickable chips:

@keyframes jelly-wiggle {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(-4deg) scale(1.04); }
  30%  { transform: rotate(3deg) scale(0.97); }
  45%  { transform: rotate(-2deg) scale(1.02); }
  60%  { transform: rotate(1deg) scale(0.99); }
  100% { transform: rotate(0deg) scale(1); }
}

props

prop	type	default	purpose
color	"pink" \| "blue" \| "green" \| "yellow" \| "orange" \| "red"	"blue"	Sets the chip color.
selected	boolean	false	Applies selected styling.
removable	boolean	false	Shows a remove action.
onClick	() => void	-	Makes the chip selectable.
onRemove	() => void	-	Handles its remove action.