Need help with ring-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

2.6K Stars 138 Forks Apache License 2.0 17.0K Commits 2 Opened issues


A collection of JetBrains Web UI components

Services available


Need anything else?

Contributors list

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 [email protected] @jetbrains/generator-ring-ui
  2. Go to the root directory of your project (create one if necessary), run
    yo @jetbrains/ring-ui
    and enter the name of the project. Then run
    npm install
    to install all the necessary npm dependencies.
  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

    ring-ui components where needed. Otherwise, create an entry point (for example,
    ) and
    the components there. ``` javascript import React from 'react'; import ReactDOM from 'react-dom'; import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';

ReactDOM.render(, document.getElementById('container')); ```

  1. Create
    with the following contents (example): ``` javascript 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: [ ...ringConfig.module.rules, ] } };

module.exports = webpackConfig; ```




We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.