{"id":13880811,"url":"https://github.com/maincode-org/maincode-ui","last_synced_at":"2025-10-26T05:30:46.219Z","repository":{"id":45346361,"uuid":"404455516","full_name":"maincode-org/maincode-ui","owner":"maincode-org","description":"🚀 A collection of freely available React.js UI components by Maincode!","archived":false,"fork":false,"pushed_at":"2022-01-20T19:57:46.000Z","size":53403,"stargazers_count":4,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T15:39:50.834Z","etag":null,"topics":["components","ionic","react"],"latest_commit_sha":null,"homepage":"https://maincode-org.github.io/maincode-ui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maincode-org.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}},"created_at":"2021-09-08T18:32:47.000Z","updated_at":"2023-06-12T13:38:20.000Z","dependencies_parsed_at":"2022-08-04T14:02:52.242Z","dependency_job_id":null,"html_url":"https://github.com/maincode-org/maincode-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maincode-org%2Fmaincode-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maincode-org%2Fmaincode-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maincode-org%2Fmaincode-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maincode-org%2Fmaincode-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maincode-org","download_url":"https://codeload.github.com/maincode-org/maincode-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238264674,"owners_count":19443388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["components","ionic","react"],"created_at":"2024-08-06T08:03:30.293Z","updated_at":"2025-10-26T05:30:45.134Z","avatar_url":"https://github.com/maincode-org.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/maincode"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://maincode-org.github.io/maincode-ui/\"\u003e\n    \u003cimg src=\"./assets/MaincodeUITitle_Filled.png\" width=\"581\" alt=\"Maincode UI logo\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eA collection of freely available React.js UI components by Maincode!\u003c/h3\u003e\n\u003cp align=\"center\"\u003eBuild as a mobile first, batteries included extension for \u003ca href=\"https://github.com/ionic-team/ionic-framework\"\u003eIonic Framework\u003c/a\u003e apps.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://maincode-org.github.io/maincode-ui/\"\u003e\u003cstrong\u003e\u003e\u003c/strong\u003e View demo and documentation page\u003c/a\u003e\u003c/p\u003e\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/strapi\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/maincode-ui/latest.svg\" alt=\"NPM Version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/strapi\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/maincode-ui.svg\" alt=\"Monthly download on NPM\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n**Maincode UI** strives to deliver quickly integratable components to supplement **Ionic** or **other React.js**\napplications. It is:\n\n- **Simplistic but customizable**. The components are high level and include several sub-components. It trades some\n  customization for less development time. We gradually expand our use-case support.\n\n- **Not a complete UI library**. For a complete collection of lower level components, please see the Ionic\n  Framework [component library](https://ionicframework.com/docs/components). Your **Maincode UI** theming will\n  automatically theme any Ionic component!\n\n- **Usable with most React.js frameworks**. The components even support server side rendering in Next.js with the use of dynamic imports.\n\n- **An Ionic extension**. It provides utilities for some things which are usually difficult in Ionic apps, such as\n  our **dark mode context** and **scrollbar styling** helper.\n\n## Getting Started\n\n\u003ca href=\"https://maincode-org.github.io/maincode-ui/quick-start\" target=\"_blank\"\u003eRead the Getting Started tutorial\u003c/a\u003e or\nfollow the steps below:\n\n\u003e **!Note** that the library is currently not fully compatible with **React v. 17+**, due to the [React Live v. 2.3.0](https://github.com/FormidableLabs/react-live) library's incompatibility with **React v. \u003e 16.14**.\n\u003e The means our `LiveCodeEditor` component cannot be used with React v. 17. For more information, follow this [issue](https://github.com/maincode-org/maincode-ui/issues/53) which can be monitored for updates.\n\n### ⏳ Installation\n\n```bash\nnpm install --save maincode-ui\n```\n\n### 🎉 Usage\n\nFor usage on all components, please see the [complete\ncomponent documentation.](https://maincode-org.github.io/maincode-ui/overview)\n\nThe code below is the minimum needed to get started with a \u003cb\u003eMaincode UI\u003c/b\u003e app, and spawning a [CopyArea](https://maincode-org.github.io/maincode-ui/copy-area) component identical to the first command on this page.\n\n\u003e **!Note** that the stylesheets need only be imported once for each app, not for every component.\n\n```tsx\nimport React from 'react';\nimport { CopyArea } from 'maincode-ui';\n\n// \u003e Ionic styles omitted for breviety..\n\n/** Maincode UI stylesheets. */\nimport 'maincode-ui/dist/index.css'; // All the component specific styles.\nimport 'maincode-ui/styles/theme.css'; // The default theme variables. See the \"themes\" section for customization.\n\nconst ExampleApp: React.FC = () =\u003e {\n  return \u003cCopyArea command={'npm install --save maincode-ui'} /\u003e;\n};\n```\n\nThe app will also need most of the styling from Ionic as well to work correctly. Add the [Ionic style imports](https://ionicframework.com/docs/layout/global-stylesheets) at the indicated location in the above example. The imports are:\n\n```tsx\n/* Core CSS required for Ionic components to work properly */\nimport '@ionic/react/css/core.css';\n\n/* Basic CSS for apps built with Ionic */\nimport '@ionic/react/css/normalize.css';\nimport '@ionic/react/css/structure.css';\nimport '@ionic/react/css/typography.css';\n\n/* Optional CSS utils that can be commented out */\nimport '@ionic/react/css/padding.css';\nimport '@ionic/react/css/float-elements.css';\nimport '@ionic/react/css/text-alignment.css';\nimport '@ionic/react/css/text-transformation.css';\nimport '@ionic/react/css/flex-utils.css';\nimport '@ionic/react/css/display.css';\n```\n\n### Theming\n\nThe `maincode-ui/styles/theme.css` file provides a base theme. To customize the theme you can overwrite relevant CSS\nvariables. We generally use the **Ionic theme** variable names, with a few **Maincode UI** additions.\n\nTo do this, create a new `theme.css` file, and assign values to the CSS variables described in the [Ionic\ndocumentation.](https://ionicframework.com/docs/theming/color-generator)\n\nBesides the Ionic variables, we also provide the Maincode UI specific variables described in our [theming documentation](https://maincode-org.github.io/maincode-ui/theming).\n\n#### Styling the scrollbar\n\nIt is normally difficult to apply scrollbar styles to Ionic applications [(see their issue)](https://github.com/ionic-team/ionic-framework/issues/17685).\n\nWe provide a helper to style the scrollbar. It can be used after the app is mounted:\n\n```tsx\nimport React, { useEffect } from 'react';\nimport styleScrollbar from 'maincode-ui';\n\nconst App: React.FC = () =\u003e {\n  useEffect(() =\u003e {\n    styleScrollbar();\n  }, []);\n\n  return \u003cp\u003eSome app\u003c/p\u003e;\n};\n```\n\n\u003e **!Note** that this helper is called automatically when the `ThemeContext` changes, allowing for separate dark mode scrollbar styling. If you are using our `ThemeContext`, you don't have to import the script.\n\nThe look of the scrollbar can be modified as described in our [theming documentation](https://maincode-org.github.io/maincode-ui/theming).\n\n### Dark mode\n\nThe library provides a context `ThemeContext` to manage and apply the dark and light mode themes.\n\nEnable it by applying the context on the root element of your app as shown below.\n\n```tsx\nimport { ThemeContext } from 'maincode-ui';\n\n//\u003e stylesheets and other imports omitted for brievity..\n\nconst App: React.FC = () =\u003e {\n  const theme = useContext(ThemeContext);\n\n  return \u003cdiv className={theme?.themeName}\u003emy app!\u003c/div\u003e;\n};\n```\n\nAnd wrap the app in the ThemeProvider for the context as shown below.\n\n```tsx\nReactDOM.render(\n  \u003cThemeProvider\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e,\n  document.getElementById('root')\n);\n```\n\nAlternatively, the dark mode of the library components can be partially controlled by toggling the classnames `\"light\"` and `\"dark\"` on the `body` element.\n\nYou can customize your dark mode theme by setting values for any CSS variable in your custom theme file.\n\nThe variables must be on the `body.dark` element, and also apply for `.md body.dark` and `.ios body.dark` elements. The\nreason is that dark mode is set as a classname on the `body` element with values `\"light\"` or `\"dark\"`.\n\n```css\nbody.dark,\n.ios body.dark,\n.md body.dark {\n  --ion-text-color: #bdbddd;\n  --ion-color-primary: #dd7500 !important;\n  ...;\n}\n```\n\nThis approach allows you to use variables like `--ion-text-color` in your app, and have the targeted element automatically adapt to dark\nmode.\n\n#### Setting and reading dark mode manually\n\nThe provided `ThemeContext` allows you to toggle and read the state of the app theme. This is useful when making \"toggle\"\nbuttons for dark mode, or adapting components dynamically based on theme changes.\n\nIt can be used as shown in the example below:\n\n```tsx\nimport { ThemeContext } from 'maincode-ui';\n\nconst MyComponent: React.FC = () =\u003e {\n  const theme = useContext(ThemeContext);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003emy {theme?.themeName} mode component!\u003c/h1\u003e\n      \u003cbutton onClick={theme?.toggleTheme}\u003e toggle light/dark mode for the entire app\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003e **!Note** that the `ThemeContext` also sets the mode in the browsers `localStorage` under the `themeName` key, automatically saving the clients' selected theme and loading it by default on future visits.\n\n### Styling system\n\nMaincode UI offer a lot of styling through pre-defined classnames.\n\n- This is entirely inspired by **Tailwind CSS** and can be seen as a less advanced subset of Tailwind.\n\n- It can be exchanged for **Tailwind CSS** if you want additional classnames or smart functionality such as purging.\n\n- In case you are using **Tailwind CSS**, you don't have to import our tail-generics.\n\nHere is an example of how to utilize the generic classes when styling and layouting your app!\n\n```jsx\n\u003cdiv className='flex flex-col p-1 glass-bg rounded shadow-md'\u003e\n  \u003cp className='bold'\u003eA bold styled p\u003c/p\u003e\n  \u003cp className='color-bg'\u003eAnother styled p\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Contributing\n\nLike this project?\n\n\u003ca href=\"https://www.buymeacoffee.com/maincode\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Us A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\nWe always like to participate in interesting projects, and we love to help you overcome any difficulties with our library.\n\nIf you have feedback or would like to work with is, please don't hesitate to contact us at mark@maincode.dk or mhn@maincode.dk\n\n### Extending the code base\n\nPlease see the development details below to get started with the code base.\n\n#### Setting up\n\nThe repository contains two things. The UI library's modules in the root, and the documentation react app in the `/documentation-app` folder.\n\nTo get started, first run `npm install` in both folders.\n\nRun `npm start` in the root folder to actively recompile the library code on changes. Run the same command in the documentation app to launch the app and listen to library component changes with live reloading.\n\n#### Library structure\n\nPlease notice how the logic is grouped in the following folder structure:\n\n`/styles` contain the different stylesheets with their own logical CSS overwrites. See the usage example for an explanation on the difference.\n\n`/src/components` contains sub-folders for each **category** of components offered in the library, and another level of sub-folders for each component in the category.\n\n`/documentation-app/src/pages` contain all the documentation content for each component. Please keep this updated when contributing new components.\n\n`/documentation-app/src/structure` assembles all the documentation pages into our navigation, route and layout generators. Documentation entries must be added here to appear in the webapp.\n\n### Testing\n\nTo run tests, use `npm run test`.\n\nThe source for the tests are located in the `/tests` directory.\n\nThe tests should cover at least all exposed methods in the toolkits.\n\n### License\n\nBSD 3-Clause License © [MarkKragerup](https://github.com/MarkKragerup)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaincode-org%2Fmaincode-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaincode-org%2Fmaincode-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaincode-org%2Fmaincode-ui/lists"}