Juno UI Components Library

Installation

To add Juno UI components to your app as a development dependency, install them using pnpm. Ensure you are in the root directory of your monorepo and run:

pnpm add @cloudoperators/juno-ui-components

or declare manually as a dev-dependency:

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

pnpm 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.

Agent Skills

This package publishes agent skills (task-focused guidance for AI coding agents) using TanStack Intent. The skills ship inside the npm package and version with it. See skills/README.md for the list of available skills.

To consume these skills, follow the TanStack Intent consumer guide to set up Intent in your project.

Development

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

pnpm --filter @cloudoperators/juno-ui-components run build-storybook

Run the test suite:

pnpm --filter @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.

Contributing

We welcome contributions from the community. Please follow our contribution guidelines to contribute to this project.

License

Licensed under the Apache License.