DialKit

A floating control panel for React: sliders, toggles, color pickers, spring editors, and action buttons wired directly to your UI values. Auto-detects control types from your config, fully typed, with built-in presets and JSON export.

View Demo

Installation

Install DialKit and its animation dependency via npm:

npm install dialkit motion

Or just tell your agent to set it up:

Install DialKit (npm install dialkit motion). Add <DialRoot> to the root layout and import dialkit/styles.css.

If installing manually, add the <DialRoot /> provider to your layout, and import the styles:

import { DialRoot } from 'dialkit'
import 'dialkit/styles.css'
 
export default function Layout({ children }) {
  return (
    <DialRoot>
      {children}
    </DialRoot>
  )
}

That's it. Now you can use the useDialKit hook in any component.

Prompts to get started

The easiest way to start using DialKit is to describe what you want and let your coding agent wire it up. Here are a few prompts to try.

Add DialKit to an existing animation:

I have a card component with a hover animation. Add DialKit controls so I can tune the spring physics (visualDuration and bounce), scale on hover, and shadow blur in real time. Use the useDialKit hook with a spring config and sliders.

Build something new with DialKit from scratch:

Create a spring-animated modal component using Motion. Add DialKit controls for: the entrance spring (visualDuration and bounce), overlay opacity, content border radius, and a "replay" action button that re-triggers the entrance animation.

Tune layout and spacing:

Add DialKit to this grid layout. I want sliders for gap, padding, column count (1-6), and card border radius. Group the card-specific controls into a "Card" folder. Use the values directly in the component's style props.

Explore visual variations:

Create a notification toast component with a slide-in animation from the top. Add DialKit controls for: entrance spring, vertical offset, blur amount, background opacity, and a toggle for showing/hiding the close button. Add a "trigger" action to fire a new toast.

Usage

Call useDialKit with a name and config object. Each call creates a collapsible folder in the panel with controls auto-generated from your config.

import { useDialKit } from 'dialkit'
import { motion } from 'motion/react'
 
function Card() {
  const params = useDialKit('Card', {
    blur: [24, 0, 100],      // [default, min, max]
    opacity: [0.8, 0, 1],
    scale: 1.18,             // auto-infers range
    color: '#ff5500',        // color picker
    visible: true,           // toggle
 
    // Nested objects become collapsible folders
    shadow: {
      offsetY: [8, 0, 24],
      blur: [16, 0, 48],
    },
 
    spring: {
      type: 'spring',
      visualDuration: 0.3,
      bounce: 0.2,
    },
  })
 
  return (
    <motion.div
      style={{
        filter: `blur(${params.blur}px)`,
        opacity: params.visible ? params.opacity : 0,
        color: params.color,
        boxShadow: `0 ${params.shadow.offsetY}px ${params.shadow.blur}px rgba(0,0,0,0.2)`,
      }}
      animate={{ scale: params.scale }}
      transition={params.spring}
    />
  )
}

Config Types

The config object determines what controls appear in the panel.

Format	Control	Description
`[default, min, max]`	`Slider`	Explicit range slider
`number`	`Slider`	Auto-inferred range based on value
`boolean`	`Toggle`	On/off segmented control
`"#ff5500"`	`Color Picker`	Auto-detected from hex strings
`"Hello"`	`Text Input`	Auto-detected from non-hex strings
`{ type: "select", ... }`	`Select`	Dropdown with options array
`{ type: "spring", ... }`	`Spring Editor`	Visual spring curve with Time/Physics modes
`{ type: "action" }`	`Button`	Triggers onAction callback
`{ nested: ... }`	`Folder`	Collapsible group for organization

API Reference

useDialKit

The main hook. Returns a reactive object with current parameter values.

const params = useDialKit(name, config, options?)

Prop	Type	Description
`name`	`string`	Panel folder title
`config`	`DialConfig`	Parameter definitions (see Config Types)
`options.onAction`	`(action: string) => void`	Callback when action buttons are clicked

DialRoot

Renders the floating control panel. Mount once at your app root. Takes an optional position prop ("top-right" | "top-left" | "bottom-right" | "bottom-left", defaults to "top-right").

Toggle

Booleans create an on/off segmented control.

enabled: true
darkMode: false

Spring Config

Spring configs get a visual editor with live curve preview. Two modes available:

// Time mode (simpler)
spring: {
  type: 'spring',
  visualDuration: 0.3,
  bounce: 0.2,
}
 
// Physics mode (more control)
spring: {
  type: 'spring',
  stiffness: 200,
  damping: 25,
  mass: 1,
}

Color

Hex strings are auto-detected as color pickers with a swatch and editable hex value.

color: '#ff5500'                           // auto-detected
bg: { type: 'color', default: '#000' }     // explicit

Text

Non-hex strings are auto-detected as text inputs. Use the explicit form for a placeholder.

title: 'Hello'
subtitle: { type: 'text', default: '', placeholder: 'Enter subtitle...' }

Select

Dropdown control with an array of options. Supports plain strings or value/label objects.

layout: {
  type: 'select',
  options: ['stack', 'fan', 'grid'],
  default: 'stack',
}

Actions

Add buttons to trigger callbacks from the panel.

const params = useDialKit('Controls', {
  next: { type: 'action' },
  reset: { type: 'action' },
}, {
  onAction: (action) => {
    if (action === 'next') goNext()
    if (action === 'reset') reset()
  },
})