Skip to content
Styles, assets, and React classes for Jenkins Design Language
TypeScript CSS JavaScript Smarty
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Rename some stuff and fix storybook by removing specs that cause prob… Jul 2, 2018
.styleguide chore: prettier Jun 29, 2018
.templates Add some beta utilities Aug 22, 2018
components v2.0.0-alpha.30 Sep 27, 2018
css v2.0.0-alpha.30 Sep 27, 2018
docs Initial form components (#209) Sep 5, 2018
icons v2.0.0-alpha.30 Sep 27, 2018
static Initial form components (#209) Sep 5, 2018
utils reapply some older cache modifications Jan 15, 2019
.prettierrc chore: prettier Jun 29, 2018 Jul 23, 2018
Jenkinsfile Lint + basic a11y (#207) Aug 14, 2018
LICENSE Prepare for JDL 2 (#183) May 30, 2018
PULL_REQUEST_TEMPLATE Prepare for JDL 2 (#183) May 30, 2018 Additional components (#188) Jul 3, 2018
jdl-component-creator.js Initial form components (#209) Sep 5, 2018
lerna.json v2.0.0-alpha.30 Sep 27, 2018
package.json Some version cleanup Aug 20, 2018
styleguide.config.js Some sidebar tweaks Jul 18, 2018
tslint.json Initial form components (#209) Sep 5, 2018

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


You can’t perform that action at this time.