Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News JetBrains Releases React-Based "Ring UI" 1.0 Web UI Components

JetBrains Releases React-Based "Ring UI" 1.0 Web UI Components

This item in japanese

The RingUI 1.0 release introduces a new visual language for components within light and dark environments, adds support for CSS properties and modules, and adds new Message, Tabs, and Toggle components.

With the increasing focus on dark mode with the release of macOS Mojave, Ring UI now provides a theme property for modifying the appearance of components between light and dark backgrounds.

Many projects have begun embracing PostCSS as a replacement for traditional CSS preprocessors due to its alignment with modern CSS standards. Ring UI 1.0 follows this approach to support CSS properties and CSS modules, and deprecates support for the previous usage of SASS, providing better CSS encapsulation. InfoQ reported earlier this year about Dojo embracing PostCSS as the foundation for its theming system with similar benefits.

The three new components made the Ring 1.0 release are:

  • Message, a modeless dialog with a message and action to dismiss
  • Tabs, a collection of tabs
  • Toggle, a series of on/off style toggle buttons

Ring UI includes more than 50 components, several services, convenience APIs for managing forms and inputs, and a small collection of utilities for application development including analytics, HTTP requests, and local storage. All components with Ring UI are React-based components.

Ring UI 1.0 also supports the recently released Babel 7.

JetBrains, creators of Intellij IDEA and WebStorm, use Ring UI and its components for their various web-based products including YouTrack, Hub, TeamCity, and Upsource. JetBrains released Ring UI as open source software in early 2017.

RingUI is available under the Apache 2 open source license. Contributions are welcome via the RingUI GitHub project and should follow RingUI's contribution guidelines.

Rate this Article