Ring UI 1.0 is Released!

Please welcome Ring UI 1.0!


Last year we introduced Ring UI library, an open-source library for web-based products. At JetBrains, we use Ring UI components for our web-based products like YouTrack, Hub, TeamCity, and Upsource. We keep working to improve the library and today we are happy to introduce its major release.

New visual language

We have completely re-implemented the visual language to make it clean and modern. Many components now also have a property that toggles the component’s appearance to better fit dark and light backgrounds.


Customization and theming support via CSS custom properties

Now all components use CSS custom properties to specify their colors, fonts, and other parameters. This lets you change the appearance of components on the fly in modern browsers (outdated browsers use default values).

You can also use colors from Ring UI in your apps to produce a consistent UI. To use CSS custom properties in your app, configure PostCSS as follows:

plugins: [
    preserve: true,
    variables: require('@jetbrains/ring-ui/extract-css-vars')

Customize the colors for your application and create unique color schemes!

Most components moved to CSS Modules, SASS usage is deprecated

Starting from its public release in 2017, we have been moving the Ring UI components away from SASS in favor of CSS Modules. This makes components more encapsulated and protects them from being broken by inaccurate style overriding.

New components: Message, Tabs, Toggle

Ring 1.0 introduces new components for message, tabs, and toggle.






Babel 7

A new version of Babel was released a while ago, so in this release, we’ve moved to Babel 7 to support its new features. Now if you don’t need to support outdated browsers, you can use browserlist to specify which browsers to support. It can help reduce the size of the final application code and simplify debugging.

Other changes

The Ring UI homepage has moved from to There are other usability improvements and features included in this release, which you can read more about here.

We always appreciate your feedback! Please share with us in the comment section below and report any bugs you find in our tracker. Thanks!

Comments below can no longer be edited.

6 Responses to Ring UI 1.0 is Released!

  1. Avatar

    Daniel Augustin says:

    September 25, 2018

    Are there any information available as a quickstart for Rails / RubyMine? Except the very basic quickstart I couldn’t find any useful information.

  2. Avatar

    Peiman says:

    September 25, 2018

    So nice, the nice and modern UI!

  3. Avatar

    Charlie Hayes says:

    September 27, 2018

    Sorry but I prefer the “before” =/

    It’s unfortunate so many of the bad parts of Material Design are being introduced into this library.

    I really like the datepicker though!

  4. Avatar

    Briggs says:

    October 11, 2018

    Just a simple question. Is there an effort to document the components and not just have some examples? Perhaps I just didn’t see a link to the documentation.

  5. Avatar

    Rafael Martinazzi says:

    November 23, 2018

    It’s only React? and Angular? No Vue.js?

  6. Avatar

    Djamal says:

    March 28, 2019

    I like the fact you using css custom properties, it’s a must for a project like this one.
    I should say that the UI is clear and the library seems stable as far as I can tell.
    Good job!

Discover more