{"id":38599386,"url":"https://github.com/medly/medly-components","last_synced_at":"2026-01-17T08:32:05.061Z","repository":{"id":36957769,"uuid":"183555176","full_name":"medly/medly-components","owner":"medly","description":"🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.","archived":false,"fork":false,"pushed_at":"2025-05-11T20:12:55.000Z","size":24510,"stargazers_count":79,"open_issues_count":15,"forks_count":54,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-11T20:30:16.789Z","etag":null,"topics":["babel","hacktoberfest","hacktoberfest2021","jest","lerna","react","react-testing-library","reactjs","storybook","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://medly.github.io/medly-components/","language":"TypeScript","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/medly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-04-26T04:11:32.000Z","updated_at":"2025-05-11T20:12:59.000Z","dependencies_parsed_at":"2023-02-17T12:00:38.962Z","dependency_job_id":"4bc003df-417b-4cba-be1b-87e9e455406f","html_url":"https://github.com/medly/medly-components","commit_stats":null,"previous_names":[],"tags_count":2144,"template":false,"template_full_name":null,"purl":"pkg:github/medly/medly-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medly%2Fmedly-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medly%2Fmedly-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medly%2Fmedly-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medly%2Fmedly-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/medly","download_url":"https://codeload.github.com/medly/medly-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medly%2Fmedly-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28504364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T06:57:29.758Z","status":"ssl_error","status_checked_at":"2026-01-17T06:56:03.931Z","response_time":85,"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":["babel","hacktoberfest","hacktoberfest2021","jest","lerna","react","react-testing-library","reactjs","storybook","styled-components","typescript"],"created_at":"2026-01-17T08:32:04.843Z","updated_at":"2026-01-17T08:32:05.042Z","avatar_url":"https://github.com/medly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Medly Components\n\n![Medly Components](https://medlycomponents.com/medly-components.png)\n\n[![Lint, Build, Test](https://github.com/medly/medly-components/workflows/Lint,%20Build,%20Test/badge.svg)](https://github.com/medly/medly-components/actions?query=workflow%3A%22Lint%2C+Build%2C+Test%22)\n[![react version](https://img.shields.io/badge/react-%5E16.8.6-blue)](https://www.npmjs.org/package/react)\n[![styled-components version](https://img.shields.io/badge/styled--components-%5E4.2.0-blue)](https://www.npmjs.com/package/styled-components)\n[![typescript version](https://img.shields.io/badge/types-TypeScript-blue?style=flat-square)](https://www.npmjs.com/package/typescript)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![GitHub](https://img.shields.io/github/license/medly/medly-components)](https://github.com/medly/medly-components/blob/master/LICENSE)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n\nThemable React components with various configurations to match your needs.\n\n## Documentation\n\nTo view a detailed description of the components in storybook click [here](https://medly.github.io/medly-components).\n\n## Table of Contents\n\n- 🚀 [Getting started](#getting-started)\n- 📦 [Packages](#packages)\n  - 🧩 [Core](#core)\n  - 📝 [Forms](#forms)\n  - ℹ [Icons](#icons)\n  - ⧉ [Layout](#layout)\n  - 🌀 [Loaders](#loaders)  \n  - 📄 [Markdown](#markdown)\n  - 🏞 [Theme](#theme)\n  - 🛠 [Utils](#utils)\n- 📜 [Built with](#built-with)\n- 👨‍💻 [Contributing](#CONTRIBUTING)\n- 📝 [NPM scripts](#npm-scripts)\n\n## Getting Started\n\n```properties\nnpx create-react-app medly-components-demo --template typescript\ncd medly-components-demo\nyarn add styled-components @types/styled-components\nyarn add @medly-components/theme @medly-components/utils @medly-components/icons @medly-components/core @medly-components/layout @medly-components/loaders @medly-components/forms\n```\n\nReplace the `index.tsx` content with the following:\n\n```tsx\nimport { defaultTheme } from '@medly-components/theme';\nimport { CssBaseline } from '@medly-components/core';\nimport { ThemeProvider } from 'styled-components';\nimport React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n \u003cThemeProvider theme={defaultTheme}\u003e\n  \u003cCssBaseline /\u003e\n  \u003cApp /\u003e\n \u003c/ThemeProvider\u003e,\n document.getElementById('root')\n);\n```\n\nReplace the `App.tsx` content with the following:\n\n```tsx\nimport React from 'react';\nimport { Button } from '@medly-components/core';\n\nconst App: React.FC = () =\u003e \u003cButton variant=\"solid\"\u003eClick me!\u003c/Button\u003e;\n\nexport default App;\n```\n\nIf you are using a static property of any component like `Modal.Header`, you must add `\"strictNullChecks\": false` in your `tsconfig.json` file.\n\n## Packages\n\nThe component library consists of the following packages:\n\n### [Core](https://github.com/medly/medly-components/tree/master/packages/core)\n\nThe Core package consists of almost all the basic React components like Avatar, Button, Input, List, Modal, etc.\n\n### [Forms](https://github.com/medly/medly-components/tree/master/packages/forms)\n\nThe Form package lets you create dynamic forms using simple JSON.\n\n### [Icons](https://github.com/medly/medly-components/tree/master/packages/icons)\n\nThe Icon package consists of the most commonly used SVG icons exposed as React components.\n\n### [Layout](https://github.com/medly/medly-components/tree/master/packages/layout)\n\nThe Layout package consists of components that help in creating a page layout using side panels and nav items, which are exposed as React components.\n\n### [Loaders](https://github.com/medly/medly-components/tree/master/packages/loaders)\n\nThe Loaders package consists of a few simple SVG loaders exposed as React components.\n\n### [Markdown](https://github.com/medly/medly-components/tree/master/packages/markdown)\n\nThe Markdown package consists of a basic syntx guide which helps you format your content.\n\n### [Theme](https://github.com/medly/medly-components/tree/master/packages/theme)\n\nThe Theme package defines the overall look, feel, and style of your website. Each component can be defined individually. For example, all icons of a website can be made solid, the color of all the components can be made orange, etc.\n\n### [Utils](https://github.com/medly/medly-components/tree/master/packages/utils)\n\nThe Utils package consists of the most commonly used functionalities and components. E.g. [String Helper](https://github.com/medly/medly-components/tree/master/packages/utils/src/stringHelpers.ts) has functions to convert a string to camelCase, case insensitive string comparison etc.\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://github.com/medly/medly-components/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting us the pull requests.\n\n## Contributors\n\nThis project exists thanks to all the people who contribute.\n\n\u003ca href=\"https://github.com/medly/medly-components/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=medly/medly-components\" /\u003e\n\u003c/a\u003e\n\n## Built With\n\n🔥 [react](https://github.com/facebook/react)\n\n💅 [styled-components](https://www.styled-components.com)\n\n⛑ [typescript](https://www.typescriptlang.org/)\n\n📚 [storybook](https://storybook.js.org/)\n\n💥 [babel](https://babeljs.io/)\n\n🐐 [react-testing-library](https://github.com/kentcdodds/react-testing-library)\n\n## NPM Scripts\n\nPlease find below a list of commands to execute various tasks: \n\n- `yarn build` to build components\n- `yarn commit` to commit with conventional-commit approach\n- `yarn lint:css` to run the css lint\n- `yarn lint:ts` to run the ts lint\n- `yarn lint` to run both css \u0026 ts lint\n- `yarn test` to run tests and type check\n- `yarn test:update` to update snapshots\n- `yarn test:watch` to watch tests\n- `yarn type-check` to run tsc to check types\n- `yarn test:jest` to run test only\n- `yarn storybook` to run storybook for live reloading your components\n- `yarn release` to publish the latest version to npm\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmedly%2Fmedly-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmedly%2Fmedly-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmedly%2Fmedly-components/lists"}