Juno UI Components Library

Installation

To include Juno UI components as a dev dependency in your app install with npm:

npm add @cloudoperators/juno-ui-components

…or declare manually as a dev-dependency:

// package.json
"dependencies": {
  ...
  "@cloudoperators/juno-ui-components": "*"
  ...
}

npm --workspaces install

Working With Tailwind

Juno comes with Tailwind included, so when using Juno you automatically can use tailwind in your project.

To be able to make full use of the predefined colors and other custom properties from the Juno UI components library you will need to include the ui components tailwind config into your application's tailwind config like this:

module.exports = {
  presets: [
    require("@cloudoperators/juno-ui-components/build/lib/tailwind.config")
  ],
 ...
}

Doing this lets you use Tailwind classnames from the Juno UI Components library.

Development

In order to work ON (NOT WITH) the Juno Design System and its components run storybook with:

npm -w @cloudoperators/juno-ui-components run storybook

Run the test suite:

npm -w @cloudoperators/juno-ui-components run test

Continuous Deployment to GitHub Pages

Any change to this library will automatically trigger a deployment to GitHub Pages. When changes are committed to the main branch, GitHub Actions will build and test the project. If successful, the latest version of the library will be deployed to GitHub Pages.