Astra

Slosh Gauge

Tank gauge whose liquid chases the value, tilts as it moves and splashes when it fills.

Slosh Gauge, a Astra component

Use Slosh Gauge in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/SloshGauge-TS-TW
How to install Astra components

Related components

  • Folder Float

    Folder whose notes spring out into a floating cloud when it opens on hover or press.

  • Squish Switch

    Switch whose thumb stretches with speed and squashes against the end when you flick it.

  • Call Chip

    Tool-call chip whose fill wipes across as a live timer ticks, ending green or shaking red.