{"id":14991400,"url":"https://github.com/skn437/skn-mui-types","last_synced_at":"2026-02-02T01:31:55.423Z","repository":{"id":254662079,"uuid":"847072955","full_name":"skn437/skn-mui-types","owner":"skn437","description":"A Simple Type Definition Extension Library For Material UI 5","archived":false,"fork":false,"pushed_at":"2025-10-23T06:30:34.000Z","size":31,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T08:35:58.789Z","etag":null,"topics":["bun","library","material-ui","nextjs","nodejs","npm","react","types","typescript"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skn437.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-24T19:10:49.000Z","updated_at":"2025-10-23T06:28:37.000Z","dependencies_parsed_at":"2024-08-25T07:22:59.146Z","dependency_job_id":"36a3f487-cf9c-4111-a97a-642ad3fea2c6","html_url":"https://github.com/skn437/skn-mui-types","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"bd4f1e616de766295e49d43ddcb93fc71683f05a"},"previous_names":["skn437/skn-mui-types"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/skn437/skn-mui-types","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-mui-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-mui-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-mui-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-mui-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skn437","download_url":"https://codeload.github.com/skn437/skn-mui-types/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-mui-types/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28999612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T23:10:54.274Z","status":"ssl_error","status_checked_at":"2026-02-01T23:10:47.298Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","library","material-ui","nextjs","nodejs","npm","react","types","typescript"],"created_at":"2024-09-24T14:27:43.147Z","updated_at":"2026-02-02T01:31:55.411Z","avatar_url":"https://github.com/skn437.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SKN Material UI Type Extension Library\n\n\u003cimg width=\"150px\" src=\"https://firebasestorage.googleapis.com/v0/b/skn-ultimate-project-la437.appspot.com/o/GitHub%20Library%2F14-TypeScript-SMT.svg?alt=media\u0026token=e8fb7bd7-3ef2-465b-958b-f596a6095acb\" alt=\"ui\" /\u003e\n\n\u003e 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\u0026nbsp;\n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for Material UI 6, React 18 \u0026 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\u0026nbsp;\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\u0026nbsp;\n\n## **_Use Case:_**\n\n- React\n- Next.js\n\n\u0026nbsp;\n\n## **_Requirements:_**\n\n### This library has peer dependency for React \u0026 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\u0026nbsp;\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\u0026nbsp;\n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n\u003e ```zsh\n\u003e npm add -D @best-skn/mui-types\n\u003e #or\n\u003e yarn add -D @best-skn/mui-types\n\u003e #or\n\u003e pnpm add -D @best-skn/mui-types\n\u003e #or\n\u003e bun add -D @best-skn/mui-types\n\u003e ```\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\u003e ```typescript\n\u003e import \"@best-skn/mui-types\";\n\u003e ```\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\u003e ```typescript\n\u003e import type { Sx } from \"@mui/material\";\n\u003e\n\u003e type Key = \"container\" | \"box\"; // * Create sx names here\n\u003e\n\u003e export const sx: Sx\u003cKey\u003e = {\n\u003e   //* You'll get total intellisense for `sx` names\n\u003e   container: {\n\u003e     //* You'll get intellisense for Material UI SX styles inside\n\u003e     display: \"flex\",\n\u003e     //* other styles here...\n\u003e   },\n\u003e   box: {\n\u003e     color: \"blue\",\n\u003e     //* other styles here...\n\u003e   },\n\u003e };\n\u003e ```\n\n##### (2) Import \u0026 use the created `sx` inside components in Next.js\n\n\u003e ```typescript jsx\n\u003e \"use client\"\n\u003e\n\u003e  import Typography from \"@mui/material/Typography\";\n\u003e  import { sx } from \"./sx.ts\";\n\u003e\n\u003e  const HomeComponent: React.FC\u003cunknown\u003e = () =\u003e {\n\u003e    return (\n\u003e      \u003cTypography\n\u003e        variant=\"h6\"\n\u003e        component=\"div\"\n\u003e        sx={sx.box} //* Use `sx` style here\n\u003e      \u003e\n\u003e        Home Component\n\u003e      \u003c/Typography\u003e\n\u003e    );\n\u003e  };\n\u003e\n\u003e  export default HomeComponent;\n\u003e ```\n\n\u0026nbsp;\n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` \u0026 🧛‍♀️`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\u0026nbsp;\n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-mui-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskn437%2Fskn-mui-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-mui-types/lists"}