Drip Badge: free React component

Install

Run this in any project set up for the shadcn CLI. It copies the Drip Badge source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/drip-badge.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { DripBadge } from "@/components/drip-badge";

export default function Page() {
  return <DripBadge />;
}

Built with

A free React component in the Liquid collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: motion

Props

Read from the Drip Badge source. Everything is optional unless it says required.

Prop	Type	Default
countrequired	number	—
max	number	99
tone	keyof typeof TONES	"destructive"
childrenrequired	ReactNode	—
showZero	boolean	false
className	string	—

More in Liquid

001

Droplet Button

A pill button that squashes when you press it and, as you let go, flicks a little crown of droplets from right where you pressed, then swallows them back up.

002

Liquid Switch

A toggle whose thumb stretches as it crosses, trails two droplets behind it and swallows them back up the moment it lands.

003

Liquid Segments

A row of options where the selected pill is a soft blob that stretches, splits and joins back up as it slides, and you can drag it straight to the one you want.

004

Drip Tabs

Vertical settings tabs where the highlight runs down the rail like a bead of water, trailing a little drop that catches up and sinks back in.