Cake.com Add-on UI

Cake Add-on UI is a collection of pure CSS/JS components that can be used to build addons for Cake.com products. It implements official design guidelines from Clockify Add-ons UI Kit

If you want to use other libraries, check out our premade libraries

Installation

There are two ways to install the Cake Add-on UI library.

Install via CDN

<link
  rel="stylesheet"
  href="https://resources.developer.clockify.me/ui/latest/css/main.min.css"
/>
<script src="https://resources.developer.clockify.me/ui/latest/js/main.min.js"></script>
Copy

Usage

You will find all the components that the library offers in the sidebar. For each component we have added some documentation and examples. For each component, you can also see and copy the the source code.

You can use the search bar to find a specific component.

Dark mode

The library supports dark mode. To enable it, you can use loadConfig function that is called when loading the iframe

loadConfig({
  theme: "DARK",
});
Copy

or you can use setTheme to explicitly set the theme

setTheme("DARK");
Copy

setTheme("DEFAULT");
Copy