Up and running in 30 seconds
No npm, no webpack, no config file. DivDrop works in any plain HTML file — link the CDN CSS and JS and start building immediately. No account needed.
Add the stylesheet in your <head> and the script before </body>. That's the entire installation.
Optionally add the flash prevention script in <head> before the CSS — it reads localStorage and sets your saved theme before the first paint, preventing a flash of the wrong theme on page load.
<!DOCTYPE html>
<html lang="en" data-dd-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<!-- Optional: prevents theme flash on load -->
<script>
(function(){
var t = localStorage.getItem('dd-theme');
if (t) document.documentElement.setAttribute('data-dd-theme', t);
})();
</script>
<!-- DivDrop CSS -->
<link rel="stylesheet"
href="https://divdrop.io/CDN/CSS/Def/divdrop.css">
</head>
<body>
<!-- Your content here -->
<!-- DivDrop JS -->
<script src="https://divdrop.io/CDN/JS/divdrop.js"></script>
</body>
</html>Every DivDrop component uses the dd- prefix. Copy any class from the component library and it works immediately — no JavaScript required for CSS-only components.
<!-- Button -->
<button class="dd-button">Click me</button>
<button class="dd-button dd-button-success">Success</button>
<button class="dd-button dd-button-outline dd-button-lg">Large outline</button>
<!-- Alert -->
<div class="dd-alert dd-alert-info">
ℹ Your account has been created.
</div>
<!-- Panel / card -->
<div class="dd-panel">
<div class="dd-panel-head">Panel header</div>
<div class="dd-panel-body">
<p class="dd-panel-title">Hello DivDrop</p>
<p class="dd-panel-text">Panel body content.</p>
</div>
<div class="dd-panel-foot">
<button class="dd-button dd-button-sm">Action</button>
</div>
</div>
<!-- Badge -->
<span class="dd-badge dd-badge-success">Active</span>
<span class="dd-badge dd-badge-danger">Error</span>Set data-dd-theme on your <html> tag. Every component updates instantly — no JavaScript required. DivDrop ships 9 themes out of the box.
<!-- Pick any of the 9 built-in themes -->
<html data-dd-theme="light"> <!-- Default grey -->
<html data-dd-theme="dark"> <!-- Near-black -->
<html data-dd-theme="midnight"> <!-- Deep navy + blue -->
<html data-dd-theme="forest"> <!-- Dark green -->
<html data-dd-theme="sand"> <!-- Desert sunset -->
<html data-dd-theme="rose"> <!-- Soft blush -->
<html data-dd-theme="slate"> <!-- Cool blue-grey -->
<html data-dd-theme="carbon"> <!-- Black + red -->
<html data-dd-theme="paper"> <!-- Clean white -->
<!-- Switch theme via JS -->
DD.setTheme('forest');
<!-- Switch on click -->
<button data-dd-set-theme="midnight">Go Midnight</button>Add a <style> block after the CDN link and define a token block. You only need to override the tokens you want to change — everything else inherits the DivDrop defaults.
<style> tag must come after the CDN <link> — CSS loads top to bottom, so inline styles override CDN styles when they come after.
<link rel="stylesheet" href="https://divdrop.io/CDN/CSS/Def/divdrop.css">
<!-- Your custom theme — must be AFTER the CDN link -->
<style>
[data-dd-theme="mybrand"] {
--dd-bg: #1a1a2e;
--dd-surface: #16213e;
--dd-surface-soft: #1f2b52;
--dd-surface-muted:#263566;
--dd-text: #e8e8f4;
--dd-text-muted: #9090b8;
--dd-brand: #7c3aed;
--dd-border: rgba(124,58,237,.25);
--dd-border-soft: rgba(124,58,237,.12);
--dd-brand-soft: rgba(124,58,237,.1);
--dd-header-bg: #0d0d1a;
--dd-header-color: #e8e8f4;
--dd-nav-bg: #7c3aed;
--dd-nav-color: #ffffff;
}
</style>
<!-- Activate it -->
<html data-dd-theme="mybrand">DivDrop JS auto-initialises on page load. Use data-dd-* HTML attributes for behaviour, or call DD.* methods programmatically. The global is window.DD.
<!-- Smooth scroll to element -->
<button data-dd-scroll-to="#section">Jump down</button>
<!-- Processing button state -->
<button data-dd-processing="Saving…" data-dd-duration="2000">Save</button>
<!-- Toast notification -->
<button data-dd-toast="Saved!" data-dd-toast-type="success">Save</button>
<!-- Modal -->
<button data-dd-modal-open="#myModal">Open modal</button>
<div id="myModal" class="dd-modal">
<div class="dd-modal-box">
<div class="dd-stack">
<h3>Modal title</h3>
<p>Content here.</p>
<button class="dd-button" data-dd-modal-close>Close</button>
</div>
</div>
</div>
<!-- Programmatic API -->
<script>
DD.toast({ title: 'Done', message: 'Saved OK', type: 'success' });
DD.setTheme('midnight');
DD.navigate('/about');
const store = DD.globalStore({ count: 0, name: '' });
store.subscribe('count', val => console.log(val));
</script>DivDrop has two form styles — underline (default, minimal) and box (bordered). Add data-dd-validate to a <form> for built-in validation with accessible error messages.
<!-- Underline style (default) -->
<div class="dd-form">
<div class="dd-field-row">
<div class="dd-field">
<label class="dd-label">First name</label>
<input class="dd-input" type="text" placeholder="Jane">
</div>
<div class="dd-field">
<label class="dd-label">Last name</label>
<input class="dd-input" type="text" placeholder="Smith">
</div>
</div>
<div class="dd-field">
<label class="dd-label">Email</label>
<input class="dd-input" type="email">
<span class="dd-help">We'll never share this.</span>
</div>
<button class="dd-button">Submit</button>
</div>
<!-- Box style -->
<input class="dd-input-box" type="text">
<select class="dd-select-box">…</select>
<textarea class="dd-textarea-box"></textarea>
<!-- Built-in validation -->
<form data-dd-validate>
<input class="dd-input-box" type="email" required
data-dd-message="Enter a valid email.">
<button type="submit" class="dd-button">Submit</button>
</form>What's next?
Explore the full component library, download ready-made templates, or read the complete documentation.