Skip to content
A collection of JetBrains Web UI components
JavaScript CSS Kotlin Other
Branch: master
Clone or download

Latest commit

TeamcityBuildserver Publish
 - @jetbrains/ring-ui@3.0.30
 - @jetbrains/generator-ring-ui@2.0.81
 - @ring-ui/hermione@2.0.82
Latest commit 2ba68b4 May 30, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Migrate to Storybook v5.3 RC Jan 3, 2020
.storybook Remove tests in Edge, leave just one in IE to make sure that there're… May 14, 2020
.teamcity TeamCity change in 'JetBrains Public Projects / JetBrains UI / Ring U… May 14, 2020
__mocks__ Mock html files in a different way to awoid Angular examples breaking Dec 24, 2019
components Suppress size warning in header logo [publish] May 29, 2020
packages Publish May 29, 2020
test-helpers Add accessibility audit Nov 25, 2019
.browserslistrc .browserslistrc Sep 7, 2018
.editorconfig Default .editorconfig Oct 16, 2014
.eslintignore RG-1894 remove some mentions of gemini May 7, 2019
.eslintrc.js Use absolute imports in examples to better reflect the actual usage Apr 17, 2020
.gitignore Move to BrowserStack Apr 7, 2020 RG-2076 bump major version to 3.0.0 and add changelog entry Mar 4, 2020 Move to BrowserStack Apr 7, 2020
LICENSE.txt update license text to correct text of Apache-2.0 Aug 2, 2017 Move to BrowserStack Apr 7, 2020
a11y-audit.test.js Fix a11y audit reporting May 14, 2020
babel.config.js Fix karma tests Nov 25, 2019
console-errors.test.js Console errors test: wrap renders in act Apr 28, 2020
eslint.webpack.config.js Use absolute imports in examples to better reflect the actual usage Apr 17, 2020
extract-css-vars.js RING-UI-CR-3386 Wording Apr 12, 2019
jest.config.js Fix jest-based tests Apr 21, 2020
jslint-xml.js Upgrade babel-eslint. Don't swallow eslint runtime failures Jan 17, 2018
karma-base.conf.js Remove tests in Edge, leave just one in IE to make sure that there're… May 14, 2020
karma-ci.conf.js Fixing build: checking other karma timeout options Dec 19, 2018
karma-watch.conf.js RING-UI-CR-1909 Update eslint config Apr 14, 2017
karma.conf.js RING-UI-CR-1909 Update eslint config Apr 14, 2017
lerna.json Add yarn resolutions for vulnerable deps Jul 20, 2019
package.json Publish May 29, 2020
postcss.config.js Process TODOs, update button colors according to Zeplin sketches Dec 19, 2019
report-metadata.js A11y Audit: Fix metadata reporting Nov 29, 2019
security-audit-ci.js Remove unused eslint-disable directive Dec 12, 2019
stylelint.config.js RG-1860 Add a stylelint rule to highlight HEX colors usage Sep 12, 2018
wallaby.config.js fix errors, introduced by ESLint 6 Jul 8, 2019
webpack-test.config.js RG-1894 remove DocPack's related dependencies and update Webpack May 7, 2019
webpack.config.js Only apply "sideEffects: false" to `babel-loader`; (#1671) Feb 6, 2020
yarn.lock Satisfy peer dependencies May 29, 2020

Ring UI — JetBrains Web UI components

Storybook Build Status Storybook Dependencies Status Dev Dependencies Status NPM version NPM downloads

official JetBrains project

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

Quick start

  1. Install Yeoman and Ring UI generator: npm install -g yo @jetbrains/generator-ring-ui
  2. Go to the root directory of your project (create one if necessary) and run yo @jetbrains/ring-ui. After you enter the name of the project all the necessary npm dependencies will be installed.
  3. Your project is ready to be developed. The following commands are available:
    • npm start to run a local development server
    • npm test to launch karma tests
    • npm run lint to lint your code
    • npm run build to build a production bundle
    • npm run create-component to create a new component template with styles and tests

Not-so-quick start

In case boilerplate generators are not your thing and you prefer to understand the inner workings a bit better.

  1. Install Ring UI with npm install @jetbrains/ring-ui --save-exact

  2. 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 import the components there.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
    ReactDOM.render(<LoaderInline/>, document.getElementById('container'));
  3. Create webpack.config.js with the following contents (example):

    const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;
    const webpackConfig = {
      entry: 'src/entry.js', // your entry point for webpack
      output: {
        path: 'path/to/dist',
        filename: '[name].js'
      module: {
        rules: [
          <Your rules here>
    module.exports = webpackConfig;




You can’t perform that action at this time.