Liquid Gauge

A usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.

Library

Kokonut UI

Framework

React

Type

component

License

MIT

Install

npx shadcn@latest add @kokonutui/liquid-gauge

Files

• components/kokonutui/liquid-gauge.tsx
• lib/utils.ts

Source

https://github.com/kokonut-labs/kokonutui

Categories

• Chart Components
• React Chart Components
• Tailwind CSS Chart Components
• Animated Chart Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Animated Data Display Components
• Gauge Chart Components
• Tailwind CSS Gauge Chart Components
• Animated Gauge Chart Components

More from Kokonut UI

• AI Code Run
• AI Context Meter
• Apple Activity Card
• Widget Grid
• Command Palette
• Activity Terrain
• AI Agent Lanes
• AI Attachment
• AI Autocomplete
• AI Conversation Branches
• AI Checkout
• AI Inline Citations