{"_id":"@amritanshu3011/mdx-renderer","_rev":"11-47ada0f8122a0cbb76c18c61a8b2b009","name":"@amritanshu3011/mdx-renderer","dist-tags":{"latest":"1.0.11"},"versions":{"1.0.0":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.0","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.0","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"36aa73821d97858974655e95df984004df10f175","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.0.tgz","fileCount":2,"integrity":"sha512-ThZAomOz5UgmpGxZFhVhpBergoPIThNF7E/Hnq163rJUC2ut4jBlWBFtoX7hUNWPUEA2xDVlbsVbAKsCQEw4og==","signatures":[{"sig":"MEUCIH092FLoNf/Lx7UQUEapYanCh4bQHLd+CveNVTdc9olnAiEAvDKKnYoXbGjkJlj9Nu2x/K8X1jOu9EbcONwZQnh73Ug=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2757},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.18.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":">=18.0.0","recharts":">=2.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.0_1768026874364_0.8555214808807761","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.1","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.1","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"27635fecb6291409326dcff48965325383387de6","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.1.tgz","fileCount":92,"integrity":"sha512-i7ojIA4FD2CWheGwyIj6I2pj3ebCmpIyF+ZU0QF1Mf9id8wLMxynRrhHBbWoKPjCkvLY481Ji51NwiBJka9kLA==","signatures":[{"sig":"MEQCIBBM/tyfXHkeys6mR1wxwyP375XyX4AAqXKnyPYrhCrzAiBcdVHIYdtLmHWMQJsSY/C7HMW63D0pJQhq45yvShjztQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":102328},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.18.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":">=18.0.0","recharts":">=2.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.1_1768027977726_0.4231346706121508","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.3","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.3","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"1070491bd81bfc73f37628e396a26ce3c4a05f54","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.3.tgz","fileCount":92,"integrity":"sha512-aRhxrBzUYC4SIvr30OakH0Ztygy3hrBacr6QvFBUoKm9ym2Anksdu2HWnkJkXJaMQp0KzQYJpYQTbOzuauCRsg==","signatures":[{"sig":"MEUCIQDBH+3Ol5kzgwI101yRQyp/xuPOWQ18vT0mn8+7DEN06wIgOItVd8JHaFuLjZ1ZAMeCRCpHX5ZmC5yFCbfUU/cPy40=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":102363},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.18.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.3_1768028664157_0.928334879851431","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.4","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.4","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"f50c5e31b180e1c744b00e5452a1b4a155324650","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.4.tgz","fileCount":92,"integrity":"sha512-Mt48BGH3n/GqZXjc0RydBzScJrlWq06InBOyZZlZUY6bNR2p4pmo5kEQ47+fB2VsfRE8dEIs5MzttsbvOLnRXA==","signatures":[{"sig":"MEQCIH5ZijTPJWs4km8jIe0BF9KXwNxYmHkFgSWK9uCEUXOuAiBmCbspPyoFjqDhnjrnLyI/djRuQJACPlxeuGhRGLjc4A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":103704},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.18.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.4_1768031330084_0.5596724249745662","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.5","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.5","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"a997978bc8246f159d8e0d63bcc331dd2111149b","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.5.tgz","fileCount":92,"integrity":"sha512-yhLHL2urWgYQSYAuPpC7uWSpOXPlLHKqxxN3ceMujAPL4s+Tz74xxyoKQpNOmsKRwMXeyigw447nG+uSjie9Qw==","signatures":[{"sig":"MEUCICbI1sF49wIqY7XAyvbDnVBtsnc2uasJmtIVBT2a9D4SAiEA1rqhyAh9ZnAuylNd+O5b25Q8jfCvJnaR/q0Q/o9uvKg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109097},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.5_1768736214688_0.6359705883664668","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.6","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.6","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"3821eb32e29e9712f29615cb85ae737096b3c9d4","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.6.tgz","fileCount":92,"integrity":"sha512-BdM2RaS4gzvWXZt4GFQkuxMwmsKxGfJczkr4kM++d/c6QifWb4mRb4RAQuAyIajifGskjVzaQrU9atvqLANWdw==","signatures":[{"sig":"MEQCIC/lXJ5MPY7W5vPZfAJNh8ZFQH4XXxDPmha8ADl7mFwLAiAozbltIc/GcubWTZn8VJNDT9vZ0v5uzvTj5AxUQeN0aQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109144},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","typescript":"^5.0.0","@types/node":"^25.0.9","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.6_1768741573092_0.3599563683241447","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.7","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.7","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"84cbd7f60d9236194e0679ef1df2eb9b5e1be4a6","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.7.tgz","fileCount":92,"integrity":"sha512-+EMG8aWs12OThDI32W4wTcl/TuMjdTwNMZBBfdD/8EEz+xORLwtn2xmVzl5ll4Mez4rFTTYAhLxv6Ou7Nivsqg==","signatures":[{"sig":"MEUCIQDqiCVwopamzNW/9Gy3HyBxc7J0OEubMLEstC9j2UYnxgIgKhGQzgyj8hl7Dn9wcevDcTXhZNQuLygRxFEERQK2Ksg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109088},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","typescript":"^5.0.0","@types/node":"^25.0.9","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.7_1768741732450_0.7363899932036244","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.8","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.8","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"48fff8a7c1e13e468f9246607cc2ec28430dd151","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.8.tgz","fileCount":97,"integrity":"sha512-a5Zl3Z1kuznlyyUEcVU3+dH6C51EDO5Xe6vCiXei3ksEGcFjxQDbLH4TetOwI2y82k+gOGgPEFTD1QK4STx1Ow==","signatures":[{"sig":"MEYCIQD+dBGjpSu2uJdcGXvsDDob05t5VNiww1JSCyZIR4Y3vwIhAKNc6BKHN0HMeWs9IGtCX9KYwrO8VcO7sFy9tmFO+XLy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":111661},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles/base.css":"./styles/base.css"},"scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","typescript":"^5.0.0","@types/node":"^25.0.9","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.8_1768761661130_0.31703733226439246","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.9","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.9","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"d1ea5519e44cf3aacab53460e2560e10ae81ba9f","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.9.tgz","fileCount":97,"integrity":"sha512-XS877+UJTKW6txD5b3THMiu5jW8roVlKaaM6xmuk3WcHTRs8GUB/G0NW6+eYhDCw2vbNpyrnRGJ+cc283J7tpA==","signatures":[{"sig":"MEYCIQDBYr4HEJEazSmnqnMPPxKgGYm31i6pJLLQRfgHmaZSXAIhAOcRBiI+8q3cHVcsrKWQ9F2Rc7wnkVTU02WJYdNLaZj3","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":111605},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles/base.css":"./styles/base.css"},"scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","typescript":"^5.0.0","@types/node":"^25.0.9","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.9_1768762015848_0.9639901203341577","host":"s3://npm-registry-packages-npm-production"}},"1.0.10":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.10","author":{"name":"Amritanshu"},"license":"MIT","_id":"@amritanshu3011/mdx-renderer@1.0.10","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"dist":{"shasum":"98dd430f9aa328cc6161391cb129846c304ab318","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.10.tgz","fileCount":97,"integrity":"sha512-FmYae7X1nMgLyvF2w/ujjwp0IrteUry78zEsKIxGbzyxxK9RlkzQjU16pTalYxeN6PsNvXDwrfb8toM7OMLh8g==","signatures":[{"sig":"MEYCIQC/6uam6+A0ft8LfJejp2fnNyNbZbF24AHLof0VwlDw5wIhALDSGqQUfg5+cBsdH0H2GEgUkJOI6tKIQCVWo3DKB9T+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":113013},"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles/base.css":"./styles/base.css"},"scripts":{"build":"tsc"},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"_npmVersion":"10.8.2","description":"Reusable MDX visualization library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"echarts":"^5.0.0","recharts":"^2.0.0","lucide-react":"^0.562.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","typescript":"^5.0.0","@types/node":"^25.0.9","@types/react":"^18.0.0","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mdx-js/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mdx-renderer_1.0.10_1768763869003_0.5712012966248374","host":"s3://npm-registry-packages-npm-production"}},"1.0.11":{"name":"@amritanshu3011/mdx-renderer","version":"1.0.11","description":"Reusable MDX visualization library","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles/base.css":"./styles/base.css"},"scripts":{"build":"tsc"},"author":{"name":"Amritanshu"},"license":"MIT","peerDependencies":{"@mdx-js/react":">=2.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"echarts":"^5.0.0","lucide-react":"^0.562.0","recharts":"^2.0.0"},"devDependencies":{"@types/node":"^25.0.9","@types/react":"^18.0.0","typescript":"^5.0.0","vite":"^7.3.1","vite-plugin-dts":"^4.5.4"},"_id":"@amritanshu3011/mdx-renderer@1.0.11","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-8hH2LsuEfScJEfVDY1r/Vdo1I9rvKWktLQp6kZIveFzWw2L2aAk7icknBQ0eITfmTqWAfnBQbr8RKLTwAWcN1w==","shasum":"e189cb34200172c105e7f7c5503ef9ab5cdf9388","tarball":"https://registry.npmjs.org/@amritanshu3011/mdx-renderer/-/mdx-renderer-1.0.11.tgz","fileCount":97,"unpackedSize":115569,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICalxeT0RFWJlKrUU9OQ8hFMSc0BMJ0rhPccPoM94pyzAiEA5wcZwKVUnbDVtTW5UnJPeigrYRbkO5/+szJoXgXoa4Y="}]},"_npmUser":{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"},"directories":{},"maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mdx-renderer_1.0.11_1768768393850_0.6595155096182568"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-10T06:34:34.259Z","modified":"2026-01-18T20:33:14.115Z","1.0.0":"2026-01-10T06:34:34.511Z","1.0.1":"2026-01-10T06:52:57.873Z","1.0.3":"2026-01-10T07:04:24.321Z","1.0.4":"2026-01-10T07:48:50.244Z","1.0.5":"2026-01-18T11:36:54.831Z","1.0.6":"2026-01-18T13:06:13.245Z","1.0.7":"2026-01-18T13:08:52.597Z","1.0.8":"2026-01-18T18:41:01.275Z","1.0.9":"2026-01-18T18:46:56.011Z","1.0.10":"2026-01-18T19:17:49.153Z","1.0.11":"2026-01-18T20:33:14.010Z"},"author":{"name":"Amritanshu"},"license":"MIT","description":"Reusable MDX visualization library","maintainers":[{"name":"amritanshu3011","email":"amritanshu@aganitha.ai"}],"readme":"\n```markdown\n# MDX Renderer\n\nA flexible, extensible rendering engine for React. It transforms data (JSON) and MDX content into rich, interactive UI components.\n\nDesigned for **Data-Driven UI**, it allows you to render specific components dynamically based on backend responses, while giving you the power to inject your own custom components or override built-in ones.\n\n## 📦 Installation\n\n```bash\nnpm install @amritanshu3011/mdx-renderer echarts recharts lucide-react\n\n```\n\n### ⚠️ Import Styles\n\nYou **must** import the base CSS in your application's entry point (e.g., `main.jsx` or `App.jsx`) for components to render correctly.\n\n```javascript\nimport '@amritanshu3011/mdx-renderer/styles/base.css';\n\n```\n\n---\n\n## 🚀 Quick Start (Data-Driven Mode)\n\nThe core principle is simple: You provide an array of data objects, and the library renders the corresponding components.\n\n```tsx\nimport { IntentProvider, MDXRenderer } from '@amritanshu3011/mdx-renderer';\nimport Content from './content.mdx'; // Optional MDX file\n\nfunction App() {\n  // Data from your API, Backend, or LLM\n  const dashboardData = [\n    {\n      type: 'line_chart',\n      data: {\n        title: 'Monthly Revenue',\n        xKey: 'month',\n        yKey: 'value',\n        points: [{ month: 'Jan', value: 4000 }, { month: 'Feb', value: 3000 }]\n      }\n    }\n  ];\n\n  return (\n    // IntentProvider handles Data, Theme, and Registry\n    <IntentProvider data={dashboardData}>\n      \n      {/* 1. Render content from MDX files */}\n      <MDXRenderer>\n        <Content />\n      </MDXRenderer>\n\n    </IntentProvider>\n  );\n}\n\n```\n\nIn your `.mdx` file, simply use the dynamic tag:\n\n```mdx\n# Dashboard\n\nimport { DynamicVisualizations } from '@amritanshu3011/mdx-renderer';\n\nBelow is the dynamic analysis:\n\n<DynamicVisualizations />\n\n```\n\n---\n\n## 🧩 Reusability & Extension (The Registry Pattern)\n\nThis library is designed to be **extended**. You are not limited to the built-in components. You can use the `registry` prop to:\n\n1. **Add** entirely new components (e.g., a Video Player, Map, or KPI Card).\n2. **Override** built-in components to match your design system.\n3. **Adapt** backend data structures to match component props.\n\n### Example: Adding a Custom Component\n\n**1. Create your component**\n\n```jsx\n// src/components/ImageViewer.jsx\nexport const ImageViewer = ({ src, caption }) => (\n  <div className=\"card\">\n    <img src={src} alt=\"Custom\" />\n    <p>{caption}</p>\n  </div>\n);\n\n```\n\n**2. Register it in your App**\n\n```jsx\nimport { ImageViewer } from './components/ImageViewer';\n\nconst myRegistry = {\n  // Map the backend 'type' string to your React Component\n  'image_viewer': ImageViewer\n};\n\nfunction App() {\n  const data = [\n    { \n      type: 'image_viewer', // Matches your registry key\n      data: { src: 'demo.jpg', caption: 'Injected Component' } \n    }\n  ];\n\n  return (\n    <IntentProvider data={data} registry={myRegistry}>\n      <MDXRenderer><Content /></MDXRenderer>\n    </IntentProvider>\n  );\n}\n\n```\n\n### Example: Adapting Data (Adapter Pattern)\n\nIf your backend API returns data that doesn't match the library's expected props, don't change the API. Just wrap the component!\n\n```jsx\nimport { LineChart } from '@amritanshu3011/mdx-renderer';\n\n// Backend sends 'history', Library expects 'points'\nconst CustomChartAdapter = (props) => {\n  const adaptedProps = {\n    ...props,\n    points: props.history // Remap the data\n  };\n  return <LineChart {...adaptedProps} />;\n};\n\nconst myRegistry = {\n  'line_chart': CustomChartAdapter // Override the default handler\n};\n\n```\n\n---\n\n## 📚 Built-in Component Reference\n\nThe library comes with a suite of \"Smart Components\" ready to use.\n\n| Component Key | Description | Required Data Structure |\n| --- | --- | --- |\n| **`line_chart`** | Simple Line Chart | `{ title, xKey, yKey, points: [{x, y}] }` |\n| **`pros_cons`** | Two-column list | `{ title, pros: [], cons: [] }` |\n| **`comparison`** | Feature comparison table | `{ title, items: [{ name, price, features[] }] }` |\n| **`flow`** | Process flow diagram | `{ title, steps: [{ id, label, status }] }` |\n| **`concept_tree`** | Hierarchical tree view | `{ title, data: { name, children: [] } }` |\n| **`sunburst`** | Radial hierarchy chart | `{ title, data: { name, children: [{ name, value }] } }` |\n| **`interactive_composite`** | Tabbed view container | `{ title, selector: {}, views: {} }` |\n\n---\n## 🎨 Theming\n\nThe `IntentProvider` accepts a theme object to customize your application's look. You can override colors, spacing, typography, and border radius.\n\n### 1. Basic Customization (Safe Merging)\n\n**Important:** To prevent errors, always merge your overrides with the `defaultTheme`. This ensures that required properties (like spacing or typography) are not missing.\n\n```tsx\nimport { IntentProvider, defaultTheme } from '@amritanshu3011/mdx-renderer';\n\n// Create your custom theme by overriding specific values\nconst myBrandTheme = {\n  ...defaultTheme, // 1. Keep default structure\n  colors: {\n    ...defaultTheme.colors, // 2. Keep default colors (like charts)\n    primary: '#ec4899',     // 3. Override Primary (Pink)\n    background: '#111827',  // Override Background\n    text: '#f9fafb'\n  },\n  borderRadius: {\n    ...defaultTheme.borderRadius,\n    medium: '12px' // Rounder corners\n  }\n};\n\nfunction App() {\n  return (\n    <IntentProvider theme={myBrandTheme} data={...}>\n      <AppContent />\n    </IntentProvider>\n  );\n}\n```\n**Important:** Here is the full type definition for reference:\n\n\n```tsx\ntype Theme = {\n  colors: {\n    primary: string;\n    secondary: string;\n    text: string;\n    textSecondary: string;\n    background: string;\n    cardBackground: string;\n    border: string;\n    chartLine: string;\n    chartBar: string;\n  };\n  spacing: {\n    small: string;   // e.g. '8px'\n    medium: string;  // e.g. '16px'\n    large: string;   // e.g. '32px'\n    xlarge: string;  // e.g. '48px'\n  };\n  typography: {\n    fontFamily: string;\n    h1Size: string;\n    h2Size: string;\n    bodySize: string;\n    smallSize: string;\n  };\n  borderRadius: {\n    small: string;\n    medium: string;\n  };\n};\n```","readmeFilename":"README.md"}