Playground

Change a token, watch everything update

Edit the design tokens on the left. Every component on the right reads them live. Flip the scope switch to apply your changes to this whole page.

playground.scybud.com/buttons

scope: stage

Variant Label Pill shape Disabled

Click any button to trigger setButtonLoading for two seconds.

button.html

Quickstart

Running in under a minute

Link the stylesheets, import from the single entry file, and use the classes.

app.js

import { setButtonLoading, createEmptyState } from "https://ui.scybud.com/js/ui.js";

const button = document.querySelector(".btn-primary");
button.addEventListener("click", () => setButtonLoading(button, true));

createEmptyState({
  container: document.getElementById("feedContainer"),
  title: "Nothing here yet"
});

Build faster with one design system

Read the docs, open the examples, or learn the basics at learn.scybud.com.

Open the docs See examples