AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Josh PuckettComponents & kits

DialKit

DialKit auto-builds a collapsible floating panel from a useDialKit config object, with typed values for springs, easings, nested folders, actions, and JSON export. Mount DialRoot once as a sibling to your app shell, wire useDialKit in any component, and tune motion, layout, and color live. This page covers install snippets for agents, framework-specific entry points, and shortcut pills that highlight while a trigger key is held.

What's interesting

  • Floating control panel for React, Solid, Svelte, and Vue: sliders, toggles, color pickers, spring and easing editors, and keyboard shortcuts wired to your UI values.
  • DialKit auto-builds a collapsible floating panel from a useDialKit config object, with typed values for springs, easings, nested folders, actions, and JSON export.
  • Mount DialRoot once as a sibling to your app shell, wire useDialKit in any component, and tune motion, layout, and color live.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/dialkit-josh-puckett
DialKit by Josh Puckett

DialKit auto-builds a collapsible floating panel from a useDialKit config object, with typed values for springs, easings, nested folders, actions, and JSON export. Mount DialRoot once as a sibling to your app shell, wire useDialKit in any component, and tune motion, layout, and color live. This page covers install snippets for agents, framework-specific entry points, and shortcut pills that highlight while a trigger key is held.

Adapt for our [screen name]. Stack: [your stack].
Note what to cut or simplify for production.

Tags

DevToolsReactComponentsInteractionMotion