Doddi

Product engineer at @HefringMarine. Building software for boats and humans. Current side quest:

[Doddi @doddiskula]

Introducing Gauge UI: composable SVG gauges for React.

It's a @shadcn registry: one command and the source is yours.

Speedometers, clocks, compasses, activity rings, thermostats and infinitely more. All built from the same 14 small primitives.

[Doddi @doddiskula]

@drunk_vibecoder That's an interesting use case. My idea is to provide the building blocks rather than predefined tools, so developers can create their own custom tooling. Your tool could leverage some of that context, like routes and UI state, through your own custom tool in the toolbar.

[Doddi @doddiskula]

Agents write all our UI now, but we still have to see what they built, go through all the states and optimize performance.

That's a pile of devtools: TanStack Query, React Scan, Agentation, etc… all fighting over the same corners.

I'm building one place for them all. Stay tuned.

[Doddi @doddiskula]

@hugorcd This is mindblowing! The creativity behind this is incredible. Love the gears driving the clock, such a cool detail.

[Doddi @doddiskula]

Try it out: https://t.co/lB2M64llTt

[Doddi @doddiskula]

New in Gauge UI: linear gauges.

Some readings work better as a bar. Here are a few examples.

[Doddi @doddiskula]

@cameronsmith @shadcn Glad it can be of use! 🙌

[Doddi @doddiskula]

Introducing Gauge UI: composable SVG gauges for React.

It's a @shadcn registry: one command and the source is yours.

Speedometers, clocks, compasses, activity rings, thermostats and infinitely more. All built from the same 14 small primitives.

[Doddi @doddiskula]

288 clocks, one wall.

An homage to A Million Times by Humans since 1982, rebuilt in the browser with Gauge UI.

[Doddi @doddiskula]

@JoeParish8 Not planning an official Vue version, but the primitives are mostly SVG math, so an AI agent should be able to convert them pretty quickly: https://t.co/xVSYW5Juxw

[Doddi @doddiskula]

Same primitives, very different jobs.

[Doddi @doddiskula]

@dimagroshev The shape of the ticks and subtle glow gives it so much more character. Very cool!

[Doddi @doddiskula]

@akshatbuilds this is so accurate 😂

[Doddi @doddiskula]

@dakida01 Yeah, the chronograph is a fun one! A dial within a dial.

[Doddi @doddiskula]

A few of my favourite gauges from Gauge UI: a chronograph, a wind vane, a tiny solar system and a thermostat.

Which is your favourite?

[Doddi @doddiskula]

Four more: speed & fuel, a compass, the sun's path and activity rings.

More where these came from: https://t.co/U06H7WQPyB

[Doddi @doddiskula]

Try it out here: https://t.co/lB2M64llTt

[Doddi @doddiskula]

I build software for boats, which means I have spent a large amount of my time fighting with gauges.

So I'm working on a library for them.

Gauge UI: composable SVG gauge components for React.

A few of the shapes it can make 👇

[Doddi @doddiskula]

@itsarminbabaei @shadcn Thank you! The cockpit example was the most fun to build.

[Doddi @doddiskula]

@mhadtk @shadcn Thank you! 🙏

[Doddi @doddiskula]

@alibey_10 Thanks for sharing this! 🙌 Really appreciate it. Excited to see what gauges people make with it!

[Doddi @doddiskula]

@stevelauda_ sick gauge! the soft glow is 👌