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

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

Description

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

    import
    ring-ui components where needed. Otherwise, create an entry point (for example,
    /app/app__components.tpl.js
    ) and
    import
    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
    webpack.config.js
    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; ```

Contributing

See CONTRIBUTING.md

Links

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.