{"id":13400496,"url":"https://github.com/JetBrains/ring-ui","last_synced_at":"2025-03-14T06:31:44.635Z","repository":{"id":37439228,"uuid":"97698189","full_name":"JetBrains/ring-ui","owner":"JetBrains","description":"A collection of JetBrains Web UI components","archived":false,"fork":false,"pushed_at":"2024-08-02T21:33:53.000Z","size":1407371,"stargazers_count":3592,"open_issues_count":2,"forks_count":181,"subscribers_count":60,"default_branch":"master","last_synced_at":"2024-08-04T10:35:44.271Z","etag":null,"topics":["components","jetbrains-ui","react"],"latest_commit_sha":null,"homepage":"https://jetbrains.github.io/ring-ui","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JetBrains.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security-audit-ci.js","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-19T09:25:26.000Z","updated_at":"2024-08-05T13:16:37.038Z","dependencies_parsed_at":"2023-10-25T12:59:10.790Z","dependency_job_id":"daf63e13-9db1-43df-af11-8e92ae83ccab","html_url":"https://github.com/JetBrains/ring-ui","commit_stats":{"total_commits":16960,"total_committers":75,"mean_commits":"226.13333333333333","dds":0.8309551886792452,"last_synced_commit":"da4dde4b895ba964a6004353ec998035fed0294b"},"previous_names":[],"tags_count":2351,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fring-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fring-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fring-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fring-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JetBrains","download_url":"https://codeload.github.com/JetBrains/ring-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":220350778,"owners_count":16634025,"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","jetbrains-ui","react"],"created_at":"2024-07-30T19:00:52.642Z","updated_at":"2025-03-14T06:31:44.622Z","avatar_url":"https://github.com/JetBrains.png","language":"TypeScript","readme":"# Ring UI — JetBrains Web UI components\n[![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]\n\n[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)\n\n- [Design guildelines](https://www.jetbrains.com/help/ring-ui/welcome.html)\n- [Usage examples in Storybook][docsite]\n- [GitHub repository](https://github.com/JetBrains/ring-ui)\n- [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)\n- [Builds in TeamCity][ci-project]\n- [npm package][npm-package]\n\nThis collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.\n\n## Try now\n* Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-7-0-demo-z6v6ym), based on `create-react-app` tooling, to see and try the UI components\n* Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component\n* Check out [Ring UI Design Guidelines](http://www.jetbrains.com/help/ring-ui)\n\n## Installation\n\n* For Quick Start, use pre-built version: \n  `npm install @jetbrains/ring-ui-built`\n* For complex projects, use \"sources\" version\n  `npm install @jetbrains/ring-ui`\n  You will then need to include building Ring UI into your WebPack build (see \"Building Ring UI from source via Webpack\" below)\n\n### Quick start\n\nThe easiest way is to import necessary components as ES modules:\n```js\n// You need to import RingUI styles once\nimport '@jetbrains/ring-ui-built/components/style.css';\n\nimport alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';\nimport Button from '@jetbrains/ring-ui-built/components/button/button';\n\n...\n\nexport const Demo = () =\u003e {\n  return (\n    \u003cButton onClick={() =\u003e alertService.successMessage('Hello world')}\u003e\n      Click me\n    \u003c/Button\u003e\n  );\n};\n\n```\n\nThe bundle size will depend on the amount of components you imported.\n\n### Building Ring UI from source via Webpack\n\nIn case you have complex build, and you want to compile RingUI sources together with your sources\nin a same build process, you can use the following configuration:\n\n1. Install Ring UI with `npm install @jetbrains/ring-ui --save-exact` \n\n2. If you are building your app with webpack, make sure to `import` ring-ui components where needed. Otherwise, create an entry point (for example, `/app/app__components.tpl.js`) and\n`import` the components there. \n   ``` javascript\n   import React from 'react';\n   import ReactDOM from 'react-dom';\n   import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';\n   \n   ReactDOM.render(\u003cLoaderInline/\u003e, document.getElementById('container'));\n   ```\n\n3. Create `webpack.config.js` with the following contents (example):\n   ``` javascript\n   const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;\n   \n   const webpackConfig = {\n     entry: 'src/entry.js', // your entry point for webpack\n     output: {\n       path: 'path/to/dist',\n       filename: '[name].js'\n     },\n     module: {\n       rules: [\n         ...ringConfig.module.rules,\n         \u003cYour rules here\u003e\n       ]\n     }\n   };\n   \n   module.exports = webpackConfig;\n   ```\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md)\n\n[docsite]: https://jetbrains.github.io/ring-ui\n[ci-project]: https://teamcity.jetbrains.com/project.html?projectId=JetBrainsUi_RingUi\u0026tab=projectOverview\n[ci-bt]: https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_RingUi_GeminiTests\u0026tab=buildTypeStatusDiv\n[ci-img]:  https://teamcity.jetbrains.com/app/rest/builds/buildType:JetBrainsUi_RingUi_GeminiTests/statusIcon.svg\n[npm-package]: https://www.npmjs.com/package/@jetbrains/ring-ui\n[npm-version-img]: https://img.shields.io/npm/v/@jetbrains/ring-ui.svg\n[npm-count-img]: https://img.shields.io/npm/dt/@jetbrains/ring-ui.svg\n[storybook-img]: https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\n[browserstack-img]: https://automate.browserstack.com/badge.svg?badge_key=elc3S1IvemtCdHBjcHdmQzdRcm9xYWxTakFvSWFqT2lrOGtrTjZRbFVRaz0tLXE0VnpyUjRqSk1Xc2xIQ1NnL1pkbnc9PQ==--f96a555ca0fe3ce50d0770cb975be0f3b6a6cf79\n[browserstack-build-page]: https://automate.browserstack.com/public-build/elc3S1IvemtCdHBjcHdmQzdRcm9xYWxTakFvSWFqT2lrOGtrTjZRbFVRaz0tLXE0VnpyUjRqSk1Xc2xIQ1NnL1pkbnc9PQ==--f96a555ca0fe3ce50d0770cb975be0f3b6a6cf79\n","funding_links":[],"categories":["TypeScript","Uncategorized","UI Frameworks \u0026 Libraries","UI Frameworks","JavaScript","\u003e 1k ★","React [🔝](#readme)","Component Libraries"],"sub_categories":["Uncategorized","style"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJetBrains%2Fring-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJetBrains%2Fring-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJetBrains%2Fring-ui/lists"}