DialKit

npm install dialkit motion

Install DialKit (npm install dialkit motion). Add <DialRoot /> as a sibling alongside {children} in the root layout (not wrapping it) and import dialkit/styles.css.

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

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.

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.

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.

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.

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],
    columns: [3, 1, 6, 1],  // [default, min, max, step]
    scale: 1.18,             // auto-infers range
    color: '#ff5500',        // color picker
    visible: true,           // toggle
 
    // Nested objects become collapsible folders
    shadow: {
      _collapsed: true,      // starts collapsed
      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}
    />
  )
}

const p = useDialKit('Card', {
  blur: [24, 0, 100],
  scale: 1.2,
  darkMode: true,
  shadow: {
    blur: [10, 0, 50],
  },
}, {
  shortcuts: {
    blur:          { key: 'b', mode: 'fine' },           // B+Scroll
    scale:         { key: 's', interaction: 'drag' },     // S+Drag
    darkMode:      { key: 'm' },                          // press M to toggle
    'shadow.blur': { key: 'd', mode: 'fine' },            // D+Scroll (dot notation for nested)
  },
})

npm install dialkit solid-js

import { createDialKit } from 'dialkit/solid'
import { DialRoot } from 'dialkit/solid'
 
const params = createDialKit('Card', {
  blur: [24, 0, 100],
  scale: 1.2,
})
 
// Access via accessor
params().blur
params().scale

npm install dialkit

<!-- Card.svelte -->
<script>
  import { createDialKit } from 'dialkit/svelte'
 
  const params = createDialKit('Card', {
    blur: [24, 0, 100],
    scale: 1.2,
  })
</script>
 
<div style:filter={`blur(${params.blur}px)`}>
  ...
</div>

npm install dialkit motion-v vue

<!-- Card.vue -->
<script setup>
import { useDialKit } from 'dialkit/vue'
 
const params = useDialKit('Card', {
  blur: [24, 0, 100],
  scale: 1.2,
})
</script>
 
<template>
  <div :style="{ filter: `blur(${params.blur}px)` }">
    ...
  </div>
</template>