{"_id":"interface-kit","_rev":"4-eaf4709f1d405f5c18c0512c36683a49","name":"interface-kit","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"interface-kit","version":"0.1.0","keywords":["design","editor","interface","react","nextjs"],"author":{"name":"Josh Puckett"},"license":"MIT","_id":"interface-kit@0.1.0","maintainers":[{"name":"joshpuckett","email":"mith.puck@gmail.com"}],"homepage":"https://github.com/joshpuckett/interfacekit","bugs":{"url":"https://github.com/joshpuckett/interfacekit/issues"},"dist":{"shasum":"18f89711ebb3d2017330633ceeb857ea452368f6","tarball":"https://registry.npmjs.org/interface-kit/-/interface-kit-0.1.0.tgz","fileCount":13,"integrity":"sha512-h8xQu5KJIV5chvOGD9PoFkyiT41M6iakzHmolQoDiyS3WiSYVLBv44BeriiBhX5AFH0qktZT3aE3Nm89qYJ0WA==","signatures":[{"sig":"MEQCIDzrccnNZ+sW1/ktNnezhKUopOvC4H3qBPz8nrAt1Lu1AiA6llzUcxNsQNy+x/caH5LzBxPPe7A6TZ7oSdtsGN1zBQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3259952},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./core":{"types":"./dist/core.d.ts","import":"./dist/core.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"}},"gitHead":"a2b056413e2a022798ec62225e7cf7fc91a72f3c","scripts":{"build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"joshpuckett","email":"mith.puck@gmail.com"},"repository":{"url":"git+https://github.com/joshpuckett/interfacekit.git","type":"git"},"_npmVersion":"11.11.0","description":"Visual design tool for styling React apps in the browser","directories":{},"sideEffects":false,"_nodeVersion":"25.8.1","dependencies":{"motion":"^12.29.2"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/interface-kit_0.1.0_1774483636583_0.3762244361492624","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"interface-kit","version":"0.1.1","keywords":["design","editor","interface","react","nextjs"],"author":{"name":"Josh Puckett"},"license":"MIT","_id":"interface-kit@0.1.1","maintainers":[{"name":"joshpuckett","email":"mith.puck@gmail.com"}],"homepage":"https://github.com/joshpuckett/interfacekit","bugs":{"url":"https://github.com/joshpuckett/interfacekit/issues"},"dist":{"shasum":"e3c341f6a28ceffc885dc95572ef781b2bf4775f","tarball":"https://registry.npmjs.org/interface-kit/-/interface-kit-0.1.1.tgz","fileCount":13,"integrity":"sha512-FuaeQnwOeN1YGmePsl8MKztOcOlxbBJZMXhcqPb9mu6HY7kfDV65wHeFo5afbXvAjwmFgxqsfMgyR+7l2RlzXQ==","signatures":[{"sig":"MEUCIQC5B/oGMn947T2+vuVSmrHEPgElSDWBiKiSbtDCWHdmbAIgYqVceMM11JcRvdIiltNB0Yfe7B32D9it13dpZjZcvs4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3412291},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./core":{"types":"./dist/core.d.ts","import":"./dist/core.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"}},"gitHead":"a2b056413e2a022798ec62225e7cf7fc91a72f3c","scripts":{"build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"joshpuckett","email":"mith.puck@gmail.com"},"repository":{"url":"git+https://github.com/joshpuckett/interfacekit.git","type":"git"},"_npmVersion":"11.11.0","description":"Visual design tool for styling React apps in the browser","directories":{},"sideEffects":false,"_nodeVersion":"25.8.1","dependencies":{"motion":"^12.29.2","interface-kit":"^0.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/interface-kit_0.1.1_1774485226206_0.8482704784928194","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"interface-kit","version":"0.1.2","keywords":["design","editor","interface","react","nextjs"],"author":{"name":"Josh Puckett"},"license":"MIT","_id":"interface-kit@0.1.2","maintainers":[{"name":"joshpuckett","email":"mith.puck@gmail.com"}],"homepage":"https://github.com/joshpuckett/interfacekit","bugs":{"url":"https://github.com/joshpuckett/interfacekit/issues"},"dist":{"shasum":"c57f43cdb0d7526a9ab95dacd890d833d9acd076","tarball":"https://registry.npmjs.org/interface-kit/-/interface-kit-0.1.2.tgz","fileCount":10,"integrity":"sha512-KcmSrRy2I7wHTfBHem6U+sTZPMX9+yNaZv+elBYCUqA75FM89i1F6tDcqHThVvet2H7A1cZ1Fj2MfwzEXOUp5w==","signatures":[{"sig":"MEQCIC7v6qPxThx3fBdoez38AbXbSUZeupE5NByD0dbn2gOUAiA92Fvt9lpLzZ72aBwZ9aXHshl9ELXSji++qJR5cKnSeA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1232129},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./core":{"types":"./dist/core.d.ts","import":"./dist/core.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"}},"gitHead":"152fa78ac5ff3074eb732be739991cab83eef7d8","scripts":{"build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"joshpuckett","email":"mith.puck@gmail.com"},"repository":{"url":"git+https://github.com/joshpuckett/interfacekit.git","type":"git"},"_npmVersion":"11.11.0","description":"Visual design tool for styling React apps in the browser","directories":{},"sideEffects":false,"_nodeVersion":"25.8.1","dependencies":{"motion":"^12.29.2","interface-kit":"^0.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/interface-kit_0.1.2_1774581685535_0.2709289076933281","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"interface-kit","version":"0.1.3","description":"Visual design tool for styling React apps in the browser","author":{"name":"Josh Puckett"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/joshpuckett/interfacekit.git"},"homepage":"https://github.com/joshpuckett/interfacekit","bugs":{"url":"https://github.com/joshpuckett/interfacekit/issues"},"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./core":{"types":"./dist/core.d.ts","import":"./dist/core.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"}},"sideEffects":false,"keywords":["design","editor","interface","react","nextjs"],"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"dependencies":{"interface-kit":"^0.1.0","motion":"^12.29.2"},"scripts":{"build":"tsup","prepublishOnly":"npm run build"},"gitHead":"ca7acc397a5c45878c7cf3a3a1c6d0a82014ca9b","_id":"interface-kit@0.1.3","_nodeVersion":"25.8.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-Fd5MpJOJl/dqvKLcPknEqXtFUvG/IAwU3qMxruKUfx52zZ6OnikiURxKQW0m7QfX4PfuSSJLBZNbPLCkbZgBzw==","shasum":"3ba67ed44a317bd2a54950b03ed0ef32ebb30040","tarball":"https://registry.npmjs.org/interface-kit/-/interface-kit-0.1.3.tgz","fileCount":10,"unpackedSize":1232153,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHeFrtGjxWWGpqoh5xYdTp3BWRLX3u26mgCo2gu53JrpAiEAxInpds2RGl5cVRexMbSn59hy8WuSsIWGryu1mOXoboY="}]},"_npmUser":{"name":"joshpuckett","email":"mith.puck@gmail.com"},"directories":{},"maintainers":[{"name":"joshpuckett","email":"mith.puck@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/interface-kit_0.1.3_1774582651296_0.6142220044270603"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-26T00:07:16.582Z","modified":"2026-03-27T03:37:31.545Z","0.1.0":"2026-03-26T00:07:17.088Z","0.1.1":"2026-03-26T00:33:46.386Z","0.1.2":"2026-03-27T03:21:25.710Z","0.1.3":"2026-03-27T03:37:31.449Z"},"bugs":{"url":"https://github.com/joshpuckett/interfacekit/issues"},"author":{"name":"Josh Puckett"},"license":"MIT","homepage":"https://github.com/joshpuckett/interfacekit","keywords":["design","editor","interface","react","nextjs"],"repository":{"type":"git","url":"git+https://github.com/joshpuckett/interfacekit.git"},"description":"Visual design tool for styling React apps in the browser","maintainers":[{"name":"joshpuckett","email":"mith.puck@gmail.com"}],"readme":"# InterfaceKit\n\nA visual design tool for styling your React app directly in the browser. Select any element, tweak design parameters, then copy a single prompt for your coding agent.\n\nDevelopment-only — automatically disabled in production builds.\n\n## Install\n\n```bash\nnpm install interface-kit\n```\n\n## Quick Start\n\n```tsx\nimport { InterfaceKit } from \"interface-kit/react\";\n\nexport default function App() {\n  return (\n    <>\n      <main>{/* your app */}</main>\n      {process.env.NODE_ENV === \"development\" && <InterfaceKit />}\n    </>\n  );\n}\n```\n\nA small paintbrush button appears in the corner of your app. Click it to activate the editor, then click any element to start styling.\n\nNo Tailwind or CSS setup required — InterfaceKit injects its own stylesheet at runtime.\n\n## Features\n\n- **Style tab** — Background color, border, border radius, shadow, backdrop blur, opacity\n- **Typography** — Font family, size, weight, line height, letter spacing, style, alignment, color\n- **Layout tab** — Width, height, padding, margin, flex direction, alignment, gap\n- **Tailwind mode** — Toggle to snap values to Tailwind utility classes\n- **Copy as prompt** — Export all changes as a prompt-ready diff for your coding agent\n\n## Requirements\n\n- React 19+\n\n## Contributing\n\n1. **Open an issue first.** All PRs must reference an approved issue. PRs without a corresponding issue will be automatically closed.\n2. **Keep PRs atomic.** One feature or fix per PR.\n3. **Avoid adding dependencies.** If a dependency is absolutely necessary, justify it in the issue.\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}