Open source and live in production

Stop rewriting the same buttons and layouts

Scybud UI is a small, framework free component and token system. Plain CSS and vanilla JS, loaded straight from a CDN, with no build step.

Try the playground Browse the docs

app.scybud.com/dashboard

Dashboard

Deploys128

Active users2.4K

Errors3

index.html

<!-- Core -->
<link rel="stylesheet" href="https://ui.scybud.com/css/variables.css" />
<link rel="stylesheet" href="https://ui.scybud.com/css/typography.css" />
<link rel="stylesheet" href="https://ui.scybud.com/components/buttons/global-buttons.css" />
<!-- One JS entry -->
<script type="module" src="https://ui.scybud.com/js/ui.js"></script>

0build steps

1JS entry file

Darktheme

VanillaHTML, CSS, JS

Features

Everything a fresh page needs

Tokens, layout, typography, animations and components, all consistent across every Scybud product.

🎨

Design tokens

Colors, spacing, radius, motion and z index live in CSS custom properties that you can override.

🧱

Sidebar layout

Styles for a fixed 260px sidebar and a mobile drawer below 800px. You add the toggle script.

🔘

Buttons

Primary, secondary, pill and no background variants, plus a built in loading state with aria-busy.

🪟

Modals

Load modal markup from an HTML fragment at runtime and clear it again with closeModal.

🔍

Lightbox

Add one class to an image and it magnifies into a centered overlay with a smooth animation.

📭

Empty states

Build placeholder blocks for empty lists and feeds with a single function call.

In production

Built for the Scybud studio

The code in the docs is the exact code running across these products.

LogHue PropDek CanvArt ZeFeed TryTasty

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