cladd retweeted
Months of work, and it's finally live.
This is @t0ggles v2.0 in everything but the version number.
t0ggles has a brand new look.
Every screen, every button, every icon - redesigned from the ground up.
Tighter layout. Better contrast. Less noise.
Nothing moved, so nothing to relearn.
It's live on your board right now.
t0ggles.com/blog/t0ggles-new…
cladd retweeted
@cladd_ui was born out of this. It started as "just" the t0ggles UI library. By the end it had grown into a full open source React UI kit - and now it's the design system behind everything I build.
cladd retweeted
t0ggles has a brand new look.
Every screen, every button, every icon - redesigned from the ground up.
Tighter layout. Better contrast. Less noise.
Nothing moved, so nothing to relearn.
It's live on your board right now.
t0ggles.com/blog/t0ggles-new…
Foundation: Sizing One scale — 2xs → 2xl — that every interactive control respects. Drop a Chip inside a Button at the same size: the Chip auto-shrinks 8px so the row stays clean. No per-component math.
cladd.io/react/foundations/s…
cladd retweeted
Also is powered by latest @cladd_ui now 💪
The biggest Start Page HQ update is live!
startpagehq.com/blog/start-p…
Component: Shortcut
Keyboard shortcut hints rendered as proper kbd glyphs - ⌘K, ⌃⇧P, ⌥↵.
Sized to nest cleanly inside Button, Toolbar, or stand alone in a List row.
→ cladd.io/react/components/sh…
cladd retweeted
Did a blog post about rebuilding the Swiper Playground with cladd swiperjs.com/blog/rebuilding…
cladd retweeted
Just asked Claude Code to migrate Swiper Playground to @cladd_ui using its MCP server. And it is fully nailed it. Check it out at swiperjs.com/playground . And asked him for feedback about cladd's MCP :)
cladd retweeted
I am currently rebuilding PaneFlow on the latest @cladd_ui with @nucleoicons - and it's coming together fast and beautifully 😍
cladd retweeted
Example of how @cladd_ui's "dense, not crowded" actually looks like in production:
Swiper Studio's inspector - 30+ controls in a single column, no second-guessing what's where
studio.swiperjs.com/
useDialog()
Open a confirm, alert, or custom dialog from anywhere - a hook, an event handler, an async flow.
Controlled, not just compound.
→ cladd.io/react/hooks/use-dia…
Foundation: Surfaces
Five depth levels that nest contextually. Drop a Surface inside a Surface - the next one auto-bumps to the right level. No manual color picking. No "is this card lighter or darker than its parent?"
→ cladd.io/react/foundations/s…
Component: Toolbar
The app-shell part you actually use - buttons, separators, segmented controls, dropdowns - all on one row, same height, no eyeballing.
→ cladd.io/react/components/to…
cladd retweeted
Super excited to finally introduce @cladd_ui today - two years in the making.
It started inside t0ggles because nothing else gave me dense, nestable surfaces I could trust. Then I kept reaching for it - PaneFlow, Start Page HQ, Swiper Studio all built on it.
Introducing cladd - an opinionated React UI kit for building actual apps.
Editors. Dashboards. Design tools. Internal tools. The kind of UI where forty controls have to coexist on one screen and still stay legible.
cladd.io
There's an MCP server too.
Point Claude Code, Cursor, or any MCP-capable agent at cladd.io/mcp/ and it gets the full docs - every component, foundation, hook, with screenshots inline. Less guessing, fewer hallucinations.
npm i cladd-ui/react
Docs, demos, full component catalog → cladd.io
MIT. Free forever.