Ring UI: JetBrains' Web Component Library for Products and Plugins

What Ring UI Is and Who It Serves

Ring UI is JetBrains' internal web UI component library, released publicly on npm. The README states its goal directly: to provide all necessary building blocks for web-based products built inside JetBrains, and for third-party plugins developed for JetBrains products.

The library is written in TypeScript and targets React. It is used in JetBrains web interfaces and is available to any external developer building a plugin or extension that needs to match the JetBrains visual style. A Figma community library is available for designers, and the Storybook documentation site at jetbrains.github.io/ring-ui provides interactive examples for every component.

Two npm Packages with Different Integration Paths

The library is published as two separate npm packages with different trade-offs.

`@jetbrains/ring-ui-built` is the pre-built package. It is the quick-start option: install it, import the global stylesheet once, then import individual components as ES modules. No Webpack configuration is required:

import '@jetbrains/ring-ui-built/components/style.css';
import alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';
import Button from '@jetbrains/ring-ui-built/components/button/button';

The bundle size depends on how many components are imported, so tree-shaking applies.

`@jetbrains/ring-ui` is the source package. It is intended for complex projects where Ring UI's source should be compiled together with the project's own source in a single Webpack build. This provides maximum control over output but requires incorporating Ring UI's Webpack rules into the project's `webpack.config.js`:

const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;

The example configuration in the README shows merging `ringConfig.module.rules` into the project's own module rules array.

Repository Layout and the Packages Directory

The repository is organized as an npm workspace. The root package is `@jetbrains/ring-ui` at version 7.0.125, and additional packages live under the `packages/` directory. The full component source is in `src/`, with each component in its own subdirectory.

Build tooling includes Rollup for the distribution bundle, Jest and Vitest for tests, ESLint and Stylelint for code quality, and Storybook for component documentation. The `design-tokens.json` file at the root defines the design token set. A Figma connect configuration (`figma.config.json`) is also present, indicating that components are linked to Figma components for design-to-code traceability.

Issues are tracked in JetBrains' YouTrack at `https://youtrack.jetbrains.com/issues/RG`, not in GitHub Issues. The README links to this explicitly, so GitHub Issues on the mirror repository are not the intended feedback channel.

Installing Ring UI and Running a First Component

For the pre-built package, which requires no Webpack setup:

npm install @jetbrains/ring-ui-built

For the source package, used when you want to compile Ring UI alongside your own source:

npm install @jetbrains/ring-ui

The README uses `--save-exact` for the source package, which pins the version and avoids unplanned minor-version upgrades that could change component behavior during a Webpack compile.

The CodesandBox linked in the README provides a live environment based on `create-react-app` tooling where the components can be tried without any local installation. This is the fastest way to confirm a component's API before committing to the integration.

Design Tokens, Figma, and the Visual Language

Ring UI exposes its visual language through `design-tokens.json` at the repository root. These tokens define the palette, spacing, and typography values that components use. The Figma community library mirrors these tokens so designers work from the same source of truth as engineers.

The `figma.config.json` file enables Figma Code Connect, a tool that links Figma components to their code equivalents. When the Figma component is inspected in design mode, the corresponding Ring UI import appears in the code panel. Publishing an update to Figma requires the `FIGMA_CODE_CONNECT_TOKEN` environment variable, as documented in the build scripts.

For accessibility, a dedicated audit script `a11y-audit` runs against the Storybook instance. Both light and dark mode variations are tested by passing `DARK=true`. The CI pipeline uses TeamCity and BrowserStack for cross-browser testing, as shown by the status badges in the README.

The repository includes a `rfc/` directory for design proposals, indicating that substantial API changes go through a formal review process before implementation. This is relevant for plugin authors who need to plan ahead for upcoming component API changes.

Limitations: Scope, Ecosystem Lock, and Build Complexity

Ring UI's design language targets JetBrains products specifically. The visual tokens are not generic; teams outside the JetBrains ecosystem that adopt the library will find it pulls strongly toward JetBrains' aesthetic, which may not align with an external brand.

The source package build integration requires Webpack. Projects using Vite, esbuild, or Parcel as their primary bundler are not supported by the documented integration path. The README documents only the Webpack approach. The webpack.config.js file at the root exposes a `config` export that consumers are expected to merge into their own configuration, but the exact set of rules it applies is not enumerated in the README; developers will need to inspect the file directly.

As a monorepo workspace, the repository uses npm with a locked version (`packageManager: [email protected]`). Contributors and integrators who prefer pnpm or Yarn should be aware that the lock file is `package-lock.json` and the package manager constraint is enforced by the `packageManager` field. The `.devcontainer/` directory indicates that a containerized development environment is available for contributors who want a consistent build setup.

Ring UI Versus Material UI for React Projects

The most widely deployed open-source React component library is Material UI (MUI), which implements Google's Material Design specification. The difference in scope is clear: Ring UI is purpose-built for the JetBrains ecosystem and optimized for developer tooling interfaces, while MUI is a general-purpose library targeting the full range of web applications.

For JetBrains plugin developers, Ring UI is the correct choice because it matches the surrounding product interface exactly. The Figma library, YouTrack issue tracking, and TeamCity-based CI pipeline all integrate with JetBrains tooling. For a standalone web application with no connection to JetBrains products, MUI's larger component set and broader community documentation are likely more relevant.

Ring UI is at version 7.0.125 and receives regular pushes; the last push was on 2026-09-27.

Editorial conclusion

Ring UI fits developers building web interfaces inside the JetBrains ecosystem: YouTrack plugins, Hub extensions, or custom dashboards that need to match JetBrains' visual language. The pre-built package at @jetbrains/ring-ui-built works without Webpack configuration; the source package at @jetbrains/ring-ui requires integrating the provided webpack.config.js rules into your build. Teams outside the JetBrains ecosystem can use Ring UI, but the design tokens and visual language are tuned for JetBrains products, not general-purpose use. The last push was on 2026-09-27.

Frequently asked questions

Official sources

1. Issues
2. JetBrains/ring-ui on GitHub
3. License: Apache-2.0
4. Project website
5. README