Drip Tabs: free React component

Install

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

npx shadcn@latest add https://devl.dev/r/drip-tabs.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 { DripTabs } from "@/components/drip-tabs";

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

Built with

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

npm: @base-ui/react, motion

Props

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

Prop	Type	Default
itemsrequired	DripTabItem[]	—
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—
className	string	—
aria-label	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.

005

Drip Badge

A notification count made of liquid: a new one makes a droplet drip off the bottom, reading one pinches a piece off the side, and the number rolls either way.