Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @clevercloud/components with all npm packages installed. Try it out:

var components = require("@clevercloud/components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@clevercloud/components v1.2.0

This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.

Collection of Web Components by Clever Cloud

What is this?

This project contains a collection of Web Components made by Clever Cloud.

Some of those components are low-level like <cc-button>, <cc-input-text> or <cc-loader>, the other components are more high-level and specific to Clever Cloud's domain model.

We use them on different Web UIs we have (public and internal).

Why is it public?

  1. We want to share our knowledge and experience with Web Components along with the tooling we used to build them. We hope it will help others for their own components.
  2. We use those components ourselves but we also want our clients and partners to use them in their own custom Web UIs based on our products.
  3. We think it's a great way for our clients to give feedbacks (and even contributions) on small parts of our Web UIs.

Can I see those components?

All our components are showcased with "stories" using Storybook. You can see all our components (and their stories) on this preview.

Storybook is a great tool to present your components in many different situations. This way, you can check how they behave with different inputs (properties, attributes...) and make sure they produce the right outputs (emit events...).

We also use web-component-analyzer to generate a documentation spec sheet for each component. You can find it in the Notes tab of a component's story (example).

Can I use them in my project?

Sure, they're available on npm. Contact us if you want more details.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free