{"_id":"@best-skn/mui-types","_rev":"3-9f2e06a60b3b32a2d58d1ea2706b75eb","name":"@best-skn/mui-types","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@best-skn/mui-types","version":"1.0.0","keywords":["react","type","library","next","material","ui"],"author":{"url":"https://skn.best","name":"SKN Shukhan","email":"skn437physx@gmail.com"},"license":"MIT","_id":"@best-skn/mui-types@1.0.0","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"homepage":"https://github.com/skn437/skn-mui-types#readme","bugs":{"url":"https://github.com/skn437/skn-mui-types/issues"},"dist":{"shasum":"2834e21decb05ba46d56b4cc851d48c3b7126a0e","tarball":"https://registry.npmjs.org/@best-skn/mui-types/-/mui-types-1.0.0.tgz","fileCount":4,"integrity":"sha512-AsBORh0dNo0SkKsj3+BpVhiBCQeHYg0M1i/CwbAqFNI6E/fJIgzqzvJRL5Z8hGoup+QV6ydOecgO1f7gBeNpWg==","signatures":[{"sig":"MEYCIQDF7pOhcPs7sE85i9Drf+QWgwOxiKl/4xCnd/NFfOgfgQIhALx/17QLZhZVSxQKnQHJ+O9kITjldRK+6eUuHE4gMTP9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8041},"main":"","types":"index.d.ts","gitHead":"e2ca60d6254a45a7d7a2515e3db6c1801b33213b","_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"repository":{"url":"git+https://github.com/skn437/skn-mui-types.git","type":"git"},"_npmVersion":"10.8.1","description":"A Simple Type Definition Extension Library For Material UI 5","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/node":"^20.14.2"},"peerDependencies":{"react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19","@types/react":">= 18.3.3 < 19","@mui/material":">= 5.16.7 < 6","@types/react-dom":">= 18.3.0 < 19"},"_npmOperationalInternal":{"tmp":"tmp/mui-types_1.0.0_1724570534174_0.29730172668194044","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@best-skn/mui-types","version":"1.0.1","keywords":["react","type","library","next","material","ui"],"author":{"url":"https://skn.best","name":"SKN Shukhan","email":"skn437physx@gmail.com"},"license":"MIT","_id":"@best-skn/mui-types@1.0.1","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"homepage":"https://github.com/skn437/skn-mui-types#readme","bugs":{"url":"https://github.com/skn437/skn-mui-types/issues"},"dist":{"shasum":"dc2f839b85569e11164b0d5c48c686d2161377c9","tarball":"https://registry.npmjs.org/@best-skn/mui-types/-/mui-types-1.0.1.tgz","fileCount":4,"integrity":"sha512-qUymqVrRYo27YVueNTCR7GOx1JRqhPmXcLotiwNC4pASAuyAJbZfmOInrABruYAU4bRVfNquAdTXx5CLYtBpxQ==","signatures":[{"sig":"MEQCIBc1pvkB+celF9WxQJAOdrZk5I4p19xwU4aKXEK3nvBCAiA5JY7y4B4cv9b1ppHwdhgEs4vPJ/sVjX+TUIyDdPVVzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8038},"main":"","types":"index.d.ts","gitHead":"bd4f1e616de766295e49d43ddcb93fc71683f05a","_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"repository":{"url":"git+https://github.com/skn437/skn-mui-types.git","type":"git"},"_npmVersion":"10.8.2","description":"A Simple Type Definition Extension Library For Material UI 5","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/node":"^20.14.2"},"peerDependencies":{"react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19","@types/react":">= 18.3.3 < 19","@mui/material":">= 6.0.1 < 7","@types/react-dom":">= 18.3.0 < 19"},"_npmOperationalInternal":{"tmp":"tmp/mui-types_1.0.1_1725354922831_0.8237908606681674","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@best-skn/mui-types","description":"A Simple Type Definition Extension Library For Material UI 5","version":"1.0.2","main":"","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/skn437/skn-mui-types.git"},"keywords":["react","type","library","next","material","ui"],"author":{"name":"SKN Shukhan","email":"skn437physx@gmail.com","url":"https://skn.best"},"license":"MIT","devDependencies":{"@types/node":"^20.14.2","typescript":"^5.4.5"},"peerDependencies":{"@types/react":">= 18.3.3 < 19","@types/react-dom":">= 18.3.0 < 19","react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19","@mui/material":">= 6.0.1 < 7"},"_id":"@best-skn/mui-types@1.0.2","gitHead":"89ad875f6c59c10494c5e50a1eacd0d2d77784ca","bugs":{"url":"https://github.com/skn437/skn-mui-types/issues"},"homepage":"https://github.com/skn437/skn-mui-types#readme","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-JR6JzeUsNn+eroMrXamim/q3bfrafGliqAPbTZhLVEjvFQaZEKimEfsSklhT8V8G6GaBNKhzjibFRAO+1Jo/xA==","shasum":"20c6eee434cec88ed6c02ad5e639547b57b066cb","tarball":"https://registry.npmjs.org/@best-skn/mui-types/-/mui-types-1.0.2.tgz","fileCount":4,"unpackedSize":7782,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBfgoxsITJFNnhka86PEkqdeILXx2ieS4fJjrxBJYlC+AiEAyvrEKpkG2inwHaNShDTRBkU5phQtj+5BYpgnL4kiOa4="}]},"_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"directories":{},"maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mui-types_1.0.2_1761201054927_0.7989644374067615"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-25T07:22:14.089Z","modified":"2025-10-23T06:30:55.383Z","1.0.0":"2024-08-25T07:22:14.321Z","1.0.1":"2024-09-03T09:15:22.990Z","1.0.2":"2025-10-23T06:30:55.174Z"},"bugs":{"url":"https://github.com/skn437/skn-mui-types/issues"},"author":{"name":"SKN Shukhan","email":"skn437physx@gmail.com","url":"https://skn.best"},"license":"MIT","homepage":"https://github.com/skn437/skn-mui-types#readme","keywords":["react","type","library","next","material","ui"],"repository":{"type":"git","url":"git+https://github.com/skn437/skn-mui-types.git"},"description":"A Simple Type Definition Extension Library For Material UI 5","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"readme":"# SKN Material UI Type Extension Library\n\n\"ui\"\n\n> TypeScript React\n\n[![NPM Version](https://img.shields.io/npm/v/%40best-skn%2Fmui-types)](https://www.npmjs.com/package/@best-skn/mui-types) [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/license/mit)\n\n \n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for Material UI 6, React 18 & also for Next.js 14\n\n### I made this library so that I can use it in all of my Next.js 14 projects without writing the same codes over and over again\n\n \n\n## **_Details:_**\n\n### **`Sx` Type**\n\n- It provides total intellisense of material ui styles in separate files to be used as `sx`\n- This type will help to de-clutter your jsx/tsx components because you can create `sx` styles outside the\n components and later use it inside them\n- For usage instruction, see `Usage` section\n\n \n\n## **_Use Case:_**\n\n- React\n- Next.js\n\n \n\n## **_Requirements:_**\n\n### This library has peer dependency for React & React DOM of minimum 18.3.1. It may or may not work on 19.x\n\n### It has peer dependency for Material UI of minimum 6.0.1. It may or may not work on 7.x\n\n### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x\n\n- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`\n- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`\n- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`\n- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`\n- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`\n- 💀 Minimum [material-ui](https://www.npmjs.com/package/@mui/material) Version: `6.0.1`\n\n \n\n## **_Complementary Libraries:_**\n\n- [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types)\n- [@best-skn/next-types](https://www.npmjs.com/package/@best-skn/next-types)\n- [@best-skn/framer-types](https://www.npmjs.com/package/@best-skn/framer-types)\n\n \n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n> ```zsh\n> npm add -D @best-skn/mui-types\n> #or\n> yarn add -D @best-skn/mui-types\n> #or\n> pnpm add -D @best-skn/mui-types\n> #or\n> bun add -D @best-skn/mui-types\n> ```\n\n### Create a directory called `types` in the root location of your project, and create a file called `mui.d.ts`, then do this\n\n> ```typescript\n> import \"@best-skn/mui-types\";\n> ```\n\n### Check your `tsconfig.json` if `includes` property has `**/*.ts`, `**/*.tsx` otherwise the type definition file may not work\n\n### Now Inside your Next.js 14 Project, use the package like this (Just an example)\n\n#### **_`Sx` Type:_**\n\n##### (1) Material UI style `sx` in separate file\n\n> ```typescript\n> import type { Sx } from \"@mui/material\";\n>\n> type Key = \"container\" | \"box\"; // * Create sx names here\n>\n> export const sx: Sx = {\n> //* You'll get total intellisense for `sx` names\n> container: {\n> //* You'll get intellisense for Material UI SX styles inside\n> display: \"flex\",\n> //* other styles here...\n> },\n> box: {\n> color: \"blue\",\n> //* other styles here...\n> },\n> };\n> ```\n\n##### (2) Import & use the created `sx` inside components in Next.js\n\n> ```typescript jsx\n> \"use client\"\n>\n> import Typography from \"@mui/material/Typography\";\n> import { sx } from \"./sx.ts\";\n>\n> const HomeComponent: React.FC = () => {\n> return (\n> variant=\"h6\"\n> component=\"div\"\n> sx={sx.box} //* Use `sx` style here\n> >\n> Home Component\n> \n> );\n> };\n>\n> export default HomeComponent;\n> ```\n\n \n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` & 🧛‍♀️`Atoshi Sarker Prithula`: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.\n- 💯`My Parents`: The greatest treasures of my life ever.\n\n \n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","readmeFilename":"README.md"}