{"id":50752525,"url":"https://github.com/leandrojo/react-scale","last_synced_at":"2026-06-11T02:06:16.194Z","repository":{"id":43581507,"uuid":"162854624","full_name":"leandrojo/react-scale","owner":"leandrojo","description":"An imperative, but customizable, library UI for React.","archived":false,"fork":false,"pushed_at":"2022-10-05T23:51:35.000Z","size":3144,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-29T06:55:55.981Z","etag":null,"topics":["bootstrap","css-in-js","customizable","react","react-components","ui-components"],"latest_commit_sha":null,"homepage":"https://leandrojo.github.io/react-scale","language":"JavaScript","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/leandrojo.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":"2018-12-23T01:44:34.000Z","updated_at":"2019-08-27T15:22:43.000Z","dependencies_parsed_at":"2023-01-19T06:30:16.819Z","dependency_job_id":null,"html_url":"https://github.com/leandrojo/react-scale","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leandrojo/react-scale","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrojo%2Freact-scale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrojo%2Freact-scale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrojo%2Freact-scale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrojo%2Freact-scale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leandrojo","download_url":"https://codeload.github.com/leandrojo/react-scale/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrojo%2Freact-scale/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34178836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["bootstrap","css-in-js","customizable","react","react-components","ui-components"],"created_at":"2026-06-11T02:06:10.374Z","updated_at":"2026-06-11T02:06:15.910Z","avatar_url":"https://github.com/leandrojo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Scale\n\n[![CircleCI](https://circleci.com/gh/leandrojo/react-scale/tree/master.svg?style=shield)](https://circleci.com/gh/leandrojo/react-scale/tree/master)\n[![NPM](https://img.shields.io/npm/v/@react-scale/core.svg)](https://www.npmjs.com/package/@react-scale/core)\n\n## About\n\nReact Scale is an intuitive UI framework and own powerful customization of your components with CSS-in-JS.\n\n### Why?\n\nLook where we are: many excellent libraries can deliver what we want, so we do not reinvent the wheel every time we need to start a human interface, minimally based on known experience. All these libraries show us the plurality we need to move forward as a community. Yet they may also show us that perhaps what we really need is a more intrinsic control of this basis without our having to create everything from scratch.\n\nThis design system brings you the ability to change the primary values and that these changes instantly reflect on all components.\n\n## Installation\n\n`npm install @react-scale/core`\n\n## Live Playground\n\nFor examples of components in action, go to https://leandrojo.github.io/react-scale.\n\n## Components\n\n### Badges\n\nA simple badge:\n\n```jsx\n\u003cBadge\u003eFirst Badge\u003c/Badge\u003e\n```\n\nA style badge pill:\n\n```jsx\n\u003cBadge pill\u003eFirst Badge Pill\u003c/Badge\u003e\n```\n\nA style type badge like styles buttons:\n\n```jsx\n\u003cBadge type=\"success\"\u003e\n  Success Badge\n\u003c/Badge\u003e\n\n\u003cBadge type=\"danger\"\u003e\n  Danger Badge\n\u003c/Badge\u003e\n```\n\nHas also pill removable action and size:\n\n```jsx\n\u003cBadge size=\"sm\" removable pill onPress={this.onClear}\u003e\n  Telephone\n\u003c/Badge\u003e\n```\n\n### Buttons\n\nA complete buttons props:\n\n```jsx\n\u003cButton onPress={this.onPress}\u003eDefault Button\u003c/Button\u003e\n```\n\nA style type badge like styles buttons:\n\n```jsx\n\u003cButton type=\"success\" onPress={this.onPress}\u003e\n  Success Button\n\u003c/Button\u003e\n\n\u003cButton type=\"danger\" onPress={this.onPress}\u003e\n  Danger Button\n\u003c/Button\u003e\n```\n\nAnd sizes:\n\n```jsx\n\u003cButton size=\"xs\" onPress={this.onPress}\u003e\n  Telephone\n\u003c/Button\u003e\n\n\u003cButton size=\"sm\" onPress={this.onPress}\u003e\n  Telephone\n\u003c/Button\u003e\n\n\u003cButton size=\"lg\" onPress={this.onPress}\u003e\n  Telephone\n\u003c/Button\u003e\n\n\u003cButton size=\"xl\" onPress={this.onPress}\u003e\n  Telephone\n\u003c/Button\u003e\n```\n\nUpdate comming soon.\n\n### Custom Theme\n\n```jsx\nimport { theme, Button } from \"@react-scale/core\";\n\nconst { registerTheme } = theme;\n\nclass Theming extends Component {\n  onChangeTheme = ev =\u003e {\n    registerTheme({\n      colors: {\n        primary: ev.target.value\n      }\n    });\n  };\n\n  render() {\n    const { styles, theme } = this.props;\n    return (\n      \u003cView {...css(styles.content)}\u003e\n        \u003cinput\n          type=\"color\"\n          onChange={this.onChangeTheme}\n          value={theme.colors.primary}\n        /\u003e\n        \u003cButton type=\"primary\"\u003ePrimary Button\u003c/Button\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst style = () =\u003e {\n  return {\n    content: {\n      padding: 20\n    },\n  };\n};\n\nexport default withStyles(style)(Theming);\n```\n\n#### Playground Online\n\nhttps://codesandbox.io/s/m9qxn23w8\n\n### Icons\n\nUsing icons package [react-feather](https://github.com/carmelopullara/react-feather); Feather is a collection of simply beautiful open source icons designed by [Cole Bemis](https://github.com/colebemis/).\n\n```jsx\nimport * as Icons from 'react-feather';\n\n\u003cIcons.Camera /\u003e\n\u003cIcons.Mail color=\"red\" /\u003e\n\u003cIcons.Square color=\"blue\" size={36} /\u003e\n```\n\n## Roadmap (order by alphabetical)\n\n- [x] Alerts;\n- [x] Badges;\n- [x] Breadcrumb;\n- [x] Buttons;\n- [ ] ButtonGroups;\n- [x] ButtonToolbars;\n- [ ] DatePicker;\n- [x] Divider;\n- [ ] Dropdowns;\n- [x] Icons (external use with `react-feather`);\n- [ ] Inputs;\n- [ ] InputsGroup;\n- [ ] Menu;\n- [ ] Modal;\n- [ ] Panel;\n- [ ] Popovers;\n- [ ] Progress;\n- [ ] Selects;\n- [x] Spinners;\n- [ ] Tabs;\n- [x] Text;\n- [ ] Tooltips;\n\n## Tests\n\n`npm test`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandrojo%2Freact-scale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleandrojo%2Freact-scale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandrojo%2Freact-scale/lists"}