DialKit

By Josh Puckett

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. This page covers install snippets for agents, framework-specific entry points, and shortcut pills that highlight while a trigger key is held.

Tags

DevToolsReactComponentsInteractionMotion