Jenkins Design Language (JDL)

For end-user documentation, visit:

The Jenkins Design Language is a React component library with associated assets and styles available to use with Jenkins Blue Ocean and extensions, as well as any other project you may choose to use this library with.


This uses lerna to build, but needs some specific options, so they’re baked into the package.json:

npm install
npm run bootstrap


npm run clean

Generating a new Component

This will provide options for generating a new component within the /components.

$ npm run generate


React Storybook is an easy way to develop components with real-time feedback, run in the browser. To run Storybook, just run:

npm start

Then go to: http://localhost:9001/

Testing Components

npm test

Test may run for the entire set of components by running npm test at the root level, or you may navigate to the components directory and enter the component you would like to test (e.g. components/Button).

This project should have 100% test coverage, as there are no difficult tests such as connecting to external APIs and such that often prove problematic to reliably unit test.


This is currently using Github pages. See: /docs