DivDrop — Component Reference & Playground

Themes

9 built-in — one attribute

💡Set data-dd-theme on your <html> tag. Every component switches instantly — no JS required for the visual change. Or call dd.setTheme('forest') programmatically.

Click any theme to preview this page

<!-- Set on the html element — that's it -->
<html data-dd-theme="light">
<html data-dd-theme="dark">
<html data-dd-theme="midnight">
<html data-dd-theme="forest">
<html data-dd-theme="sand">
<html data-dd-theme="rose">
<html data-dd-theme="slate">
<html data-dd-theme="carbon">
<html data-dd-theme="paper">

<!-- JS API -->
dd.setTheme('forest');       // set any theme
dd.themes;                   // ['light','dark','midnight',...]

<!-- HTML attribute trigger -->
<button data-dd-set-theme="midnight">Go Midnight</button>

Quick Start

Install

CDN install

<!-- In <head> -->
<link rel="stylesheet" href="https://divdrop.io/CDN/CSS/Def/divdrop.css">

<!-- Before </body> -->
<script src="https://divdrop.io/CDN/JS/divdrop.js"></script>

Minimal page template

<!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>
  <link rel="stylesheet" href="https://divdrop.io/CDN/CSS/Def/divdrop.css">
</head>
<body>
  <header class="dd-header is-sticky dd-header-dark">
    <div class="dd-header-inner">
      <div class="dd-header-logo">
        <a class="dd-logo" href="/">
          <img src="https://divdrop.io/logo/divdroplogo.png" alt="DivDrop">
        </a>
      </div>
      <div class="dd-header-nav">
        <nav class="dd-nav dd-nav-flat">
          <div class="dd-nav-menu">
            <a class="dd-nav-link is-active" href="/">Home</a>
            <a class="dd-nav-link" href="/docs">Docs</a>
          </div>
          <div class="dd-nav-actions">
            <a class="dd-button dd-button-sm" href="/signup">Get started</a>
          </div>
          <button class="dd-nav-toggle" data-dd-nav-toggle>
            <span></span><span></span><span></span>
          </button>
          <div class="dd-nav-panel"></div>
        </nav>
      </div>
    </div>
  </header>
  <main class="dd-container dd-page">
    <section class="dd-section"><h1>Hello DivDrop</h1></section>
  </main>
  <script src="https://divdrop.io/CDN/JS/divdrop.js"></script>
</body>
</html>

Copy all code examples from this section

Design Tokens

:root CSS variables

📌Override after importing: :root { --dd-brand: #5046e4; }

--dd-bg

#dadada

--dd-surface

#d2d2d2

--dd-brand

#000 — primary

--dd-success

#1c7c34

--dd-danger

#a51d2d

--dd-warning

#a66a00

--dd-info

#106f80

Radius scale

xs 6px

sm 8px

md 12px

lg 18px

xl 26px

full

Copy all code examples from this section

Header + Logo

Navigation

💡Sticky goes on the header, not the nav. Logo sits outside the pill, side by side. dd-header-dark = black bg. dd-logo-right flips logo. Default header is page grey.

Header playground — modify below, copy the code

Home Docs Pricing

Get started

Style:

Logo:

Logo pos:

Nav:

Sticky:

<header class="dd-header is-sticky">
  <div class="dd-header-inner">
    <div class="dd-header-logo">
      <a class="dd-logo" href="/">
        <img src="https://divdrop.io/logo/divdroplogo.png" alt="DivDrop">
      </a>
    </div>
    <div class="dd-header-nav">
      <nav class="dd-nav">
        <div class="dd-nav-menu">
          <a class="dd-nav-link is-active" href="/">Home</a>
          <a class="dd-nav-link" href="/docs">Docs</a>
          <a class="dd-nav-link" href="/pricing">Pricing</a>
        </div>
        <div class="dd-nav-actions">
          <a class="dd-button dd-button-sm" href="/signup">Get started</a>
        </div>
        <button class="dd-nav-toggle" data-dd-nav-toggle>
          <span></span><span></span><span></span>
        </button>
        <div class="dd-nav-panel"></div>
      </nav>
    </div>
  </div>
</header>

Copy all code examples from this section

Standalone Pill Nav

Navigation

💡Add is-sticky directly to .dd-nav to float the pill. Logo inside via .dd-nav-brand is optional.

Live demo

<nav class="dd-nav is-sticky">
  <a class="dd-nav-brand" href="/">
    <img src="https://divdrop.io/logo/divdroplogo.png" alt="DivDrop">
  </a>
  <div class="dd-nav-menu">
    <a class="dd-nav-link is-active" href="/">Home</a>
    <a class="dd-nav-link" href="/docs">Docs</a>
    <a class="dd-nav-link" href="/pricing">Pricing</a>
  </div>
  <div class="dd-nav-divider"></div>
  <div class="dd-nav-actions">
    <a class="dd-button dd-button-ghost dd-button-sm">Sign in</a>
    <a class="dd-button dd-button-sm">Get started</a>
  </div>
  <button class="dd-nav-toggle" data-dd-nav-toggle>
    <span></span><span></span><span></span>
  </button>
  <div class="dd-nav-panel"></div>
</nav>

Copy all code examples from this section

Buttons

Playground

Modify → copy

Variant:

Size:

Shape:

Label:

Processing:

<button class="dd-button">Click me</button>

All variants at a glance

Copy all code examples from this section

Panels

Component

All variants

Header

Default

Hover to lift.

Footer

Dark

High contrast.

Feature

Gradient surface.

<div class="dd-panel">
  <div class="dd-panel-head">Header</div>
  <div class="dd-panel-body">
    <p class="dd-panel-title">Title</p>
    <p class="dd-panel-text">Body copy.</p>
  </div>
  <div class="dd-panel-foot">Footer</div>
</div>
<div class="dd-panel dd-panel-dark">…</div>
<div class="dd-panel dd-panel-feature dd-panel-static">…</div>
<div class="dd-panel dd-panel-side">
  <img class="dd-panel-media" src="photo.jpg" alt="">
  <div class="dd-panel-body">Content</div>
</div>

Copy all code examples from this section

Badges

Playground

Modify → copy

Badge

Variant:

Label:

<span class="dd-badge">Badge</span>

All variants

DefaultSoftLightSuccessDangerWarningInfo

Copy all code examples from this section

Alerts

Component

All variants

Default — neutral information.

✓ Success — action completed.

✕ Danger — something went wrong.

⚠ Warning — heads up.

ℹ Info — useful tip.

<div class="dd-alert">Default</div>
<div class="dd-alert dd-alert-success">✓ Success</div>
<div class="dd-alert dd-alert-danger">✕ Danger</div>
<div class="dd-alert dd-alert-warning">⚠ Warning</div>
<div class="dd-alert dd-alert-info">ℹ Info</div>

Copy all code examples from this section

Avatars

Component

Sizes + group

AB

CD

EF

A

B

C

+4

<div class="dd-avatar dd-avatar-sm">AB</div>
<div class="dd-avatar">CD</div>
<div class="dd-avatar dd-avatar-lg">EF</div>
<div class="dd-avatar dd-avatar-xl">
  <img src="photo.jpg" alt="User">
</div>

<!-- Group -->
<div class="dd-avatar-group">
  <div class="dd-avatar">A</div>
  <div class="dd-avatar">B</div>
  <div class="dd-avatar dd-avatar-sm">+4</div>
</div>

Copy all code examples from this section

Skeleton Loaders

New in v3.0

All preset shapes

<div class="dd-skeleton dd-skeleton-text"></div>
<div class="dd-skeleton dd-skeleton-title"></div>
<div class="dd-skeleton dd-skeleton-img"></div>
<div class="dd-skeleton dd-skeleton-btn"></div>
<div class="dd-skeleton dd-skeleton-avatar"></div>
<div class="dd-skeleton dd-skeleton-card"></div>
<!-- Custom: add inline width/height -->
<div class="dd-skeleton" style="width:80px;height:80px;border-radius:50%"></div>

Copy all code examples from this section

Divider

New in v3.0

Text · line · vertical

or continue with

Option A Option B Option C

<div class="dd-divider">or continue with</div>
<hr class="dd-divider-line">
<span class="dd-divider-v"></span>

Copy all code examples from this section

Breadcrumb

New in v3.0 — CSS-only

Separator playground

Separator:

<ol class="dd-breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/components">Components</a></li>
  <li>Breadcrumb</li>
</ol>

Copy all code examples from this section

Pagination

New in v3.0

Default + compact

«123…12»

«345»

<div class="dd-pagination">
  <span class="dd-page-item is-disabled">«</span>
  <span class="dd-page-item is-active">1</span>
  <span class="dd-page-item">2</span>
  <span class="dd-page-item">3</span>
  <span class="dd-page-item">»</span>
</div>
<!-- Compact: add dd-pagination-sm -->

Copy all code examples from this section

CSS Tooltips

New in v3.0 — CSS only, no JS

Four positions — hover each

<button data-dd-tooltip="Top tooltip">Hover me</button>
<button data-dd-tooltip="Bottom" data-dd-tooltip-pos="bottom">…</button>
<button data-dd-tooltip="Left"   data-dd-tooltip-pos="left">…</button>
<button data-dd-tooltip="Right"  data-dd-tooltip-pos="right">…</button>
<!-- Works on any element. Pure CSS — no JS required. -->

Copy all code examples from this section

Forms

Two styles — underline & box

Live demo

Underline style

First name

Last name

EmailWe'll never share your email.

Message

I agree to terms

Box style

Company

Plan

Valid field

Invalid fieldPlease check this.

<!-- Underline inputs -->
<div class="dd-form">
  <div class="dd-field">
    <label class="dd-label">Email</label>
    <input class="dd-input" type="email">
    <span class="dd-help">Helper text</span>
  </div>
  <label class="dd-control"><input type="checkbox"> Agree</label>
  <button class="dd-button">Submit</button>
</div>

<!-- Box inputs -->
<input class="dd-input-box" type="text">
<select class="dd-select-box">…</select>
<textarea class="dd-textarea-box"></textarea>

<!-- Validation states -->
<input class="dd-input-box is-valid">
<input class="dd-input-box is-invalid">
<span class="dd-field-error">Error message</span>

Copy all code examples from this section

Tables

Component

Striped + hover

Component	Category	Status	JS
Panels	Layout	Ready	Reveal
Buttons	Action	Ready	Processing
Router	JS	New	Yes

<div class="dd-table-wrap">
  <table class="dd-table dd-table-striped dd-table-hover">
    <thead><tr><th>Col A</th><th>Col B</th></tr></thead>
    <tbody><tr><td>Row</td><td>Cell</td></tr></tbody>
  </table>
</div>

Copy all code examples from this section

Progress & Loader

Playground

Modify → copy

Loading…

Value: 65%

Colour:

Loader:

<div class="dd-progress">
  <div class="dd-progress-bar" style="--dd-progress:65%"></div>
</div>
<div class="dd-loader"></div>

Copy all code examples from this section

Dropdown

JS Component

Left + right aligned

<div class="dd-dropdown">
  <button data-dd-dropdown-toggle class="dd-button dd-button-sm">Actions ▾</button>
  <div class="dd-dropdown-menu">
    <div class="dd-dropdown-header">Options</div>
    <a class="dd-dropdown-item" href="#">Edit</a>
    <a class="dd-dropdown-item" href="#">Duplicate</a>
    <div class="dd-dropdown-divider"></div>
    <a class="dd-dropdown-item dd-item-danger" href="#">Delete</a>
  </div>
</div>
<!-- Right-aligned: add dd-dropdown-right to menu -->

Copy all code examples from this section

Modal

JS Component

Live — open each

<button data-dd-modal-open="#myModal">Open</button>

<div id="myModal" class="dd-modal">
  <div class="dd-modal-box">
    <div class="dd-stack">
      <h3>Title</h3>
      <p>Content.</p>
      <button data-dd-modal-close class="dd-button">Close</button>
    </div>
  </div>
</div>

<!-- Sizes: dd-modal-sm / dd-modal-lg -->
<!-- Backdrop click + Escape close -->

<!-- Confirm dialog -->
<button data-dd-confirm="Sure?" data-dd-confirm-type="danger">Delete</button>

Copy all code examples from this section

Drawer

JS Component

Left + right

<button data-dd-drawer-open="#myDrawer">Open drawer</button>

<aside id="myDrawer" class="dd-drawer">
  <button data-dd-drawer-close class="dd-button dd-button-sm">Close</button>
  <a class="dd-sidebar-link is-active" href="#">Dashboard</a>
  <a class="dd-sidebar-link" href="#">Settings</a>
</aside>

<!-- Right drawer: add dd-drawer-right -->
<!-- Backdrop auto-created by JS. Escape closes. -->

Copy all code examples from this section

Tabs

JS Component

Live

DivDrop CSS controls the visual system: tokens, components, utilities. All prefixed dd-.

DivDrop JS adds reactive behavior: store, binder, router, 26 auto-init modules.

Override any --dd-* CSS custom property to theme the entire system.

<dd-tabs>
  <div class="dd-tabs-list">
    <button class="dd-tab-trigger" data-dd-tab="one">Tab 1</button>
    <button class="dd-tab-trigger" data-dd-tab="two">Tab 2</button>
  </div>
  <div class="dd-tab-panel" data-dd-tab-panel="one">Content 1</div>
  <div class="dd-tab-panel" data-dd-tab-panel="two">Content 2</div>
</dd-tabs>
<!-- data-dd-tab must match data-dd-tab-panel -->

Copy all code examples from this section

Accordion

JS Component

Single-open mode

A component-first CSS framework + reactive JS layer. Zero dependencies, no build step.

Link CSS in <head>, JS before </body>. Works in any HTML file immediately.

Override CSS custom properties: :root { --dd-brand: #5046e4; }

<!-- data-dd-accordion-single: only one open at a time -->
<div class="dd-stack dd-stack-sm" data-dd-accordion-single>
  <div class="dd-accordion-item is-open"> <!-- is-open = expanded by default -->
    <button class="dd-accordion-trigger">Question?</button>
    <div class="dd-accordion-panel">Answer.</div>
  </div>
  <div class="dd-accordion-item">
    <button class="dd-accordion-trigger">Another?</button>
    <div class="dd-accordion-panel">Answer.</div>
  </div>
</div>

Copy all code examples from this section

JavaScript API

Full reference

⚠️Set window.dd_DEV = true before the script to enable console warnings for missing keys, unregistered actions, and broken selectors.

Global object

window.dd       // main global
window.DivDrop  // alias

dd.store(initial)         // reactive store factory
dd.binder(store)          // DOM binder → .mount()
dd.action(name, fn)       // register named action
dd.dispatch(name, data)   // fire named action
dd.on(event, fn)          // event bus subscribe
dd.off(event, fn)         // unsubscribe
dd.emit(event, data)      // event bus emit
dd.router(routes)         // hash router
dd.navigate('/path')      // programmatic navigation
dd.toast(opts)            // show toast
dd.setBellCount(n)        // update nav bell badge
dd.globalStore(initial)   // single-page store (auto-mounts binder)

Copy all code examples from this section

Reveal

JS Behavior — scroll animation

Effects + stagger

fade

fly-left

zoom

blur

<dd-reveal effect="fade">…</dd-reveal>
<dd-reveal effect="fly-left">…</dd-reveal>
<dd-reveal effect="fly-right">…</dd-reveal>
<dd-reveal effect="zoom">…</dd-reveal>
<dd-reveal effect="blur">…</dd-reveal>

<!-- Stagger with CSS variable delay -->
<dd-reveal effect="fly-left" style="--dd-reveal-delay:100ms">…</dd-reveal>
<dd-reveal effect="fly-left" style="--dd-reveal-delay:200ms">…</dd-reveal>

<!-- Attribute syntax -->
<div data-dd-reveal="zoom">…</div>

Copy all code examples from this section

Typewriter

JS Behavior — multi-phrase

Live

<!-- Single phrase -->
<h1><dd-typewriter speed="40">Your headline.</dd-typewriter></h1>

<!-- Multi-phrase cycling -->
<h1>
  <dd-typewriter speed="35"
    phrases='["Build fast.","Zero deps.","Ship today."]'>
  </dd-typewriter>
</h1>

<!-- speed="40"        ms per character -->
<!-- delete-speed="24" ms per deletion -->
<!-- pause="1600"      pause after phrase -->
<!-- caret="false"     hide cursor -->
<!-- loop="false"      type once -->

Copy all code examples from this section

Marquee

JS Behavior — hover pauses

Vertical + horizontal

Vertical

Zero dependencies

CSS + JS only

Hover to pause

No build step

Horizontal

DivDrop CSS Reactive JS Zero deps

<dd-marquee>
  <div>Item 1</div><div>Item 2</div>
</dd-marquee>

<dd-marquee direction="horizontal">…</dd-marquee>

<!-- Speed: --dd-marquee-speed (default 8000ms) -->
<!-- Height: max-height on the element -->

Copy all code examples from this section

Counter

JS Behavior — count-up on scroll

Live

0

Downloads

0

Satisfaction

0

Revenue

0

JS Modules

<dd-counter to="4200" suffix="+">0</dd-counter>
<dd-counter to="99"   suffix="%">0</dd-counter>
<dd-counter to="14"   prefix="$" suffix="k">0</dd-counter>

<!-- to="1000"      target number -->
<!-- prefix="$"     text before -->
<!-- suffix="%"     text after -->
<!-- duration="1300" animation ms -->
<!-- decimals="2"   decimal places -->

Copy all code examples from this section

Toast

JS Behavior

HTML trigger + JS call

<!-- HTML trigger -->
<button data-dd-toast="Message">Toast</button>
<button data-dd-toast="Success!" data-dd-toast-type="success">Toast</button>

<!-- JS programmatic -->
<script>
dd.toast('Simple string', 3000);

dd.toast({
  title:    'File uploaded',
  message:  'photo.jpg is ready.',
  type:     'success',
  duration: 4000,
  closable: true
});
</script>

Copy all code examples from this section

data-dd-repeat

Reactive list rendering

Live — edit store, list re-renders

3 users

Name	Role	Status

<!-- 1. Create store -->
<script>
const store = dd.globalStore({
  users: [
    { name: 'Jane Smith', role: 'Designer', status: 'Active' },
  ]
});
</script>

<!-- 2. Repeat element -->
<ul data-dd-repeat="users">
  <template>
    <li>
      <strong data-dd-key="name"></strong>
      <span data-dd-key="role"></span>
    </li>
  </template>
</ul>

<!-- 3. Update → DOM re-renders automatically -->
<script>
store.update('users', list =>
  [...list, { name: 'New', role: 'Guest', status: 'Active' }]
);
</script>

Copy all code examples from this section

Reactive Store + Binding

JS — React-like, no framework

Live two-way binding demo

Your name (data-dd-bind)

Dark mode toggle Enable dark mode

Hello, World!

Dark mode: false

<script>
const store = dd.globalStore({ userName: '', darkMode: false });

store.subscribe('darkMode', isDark => {
  document.documentElement.setAttribute(
    'data-dd-theme', isDark ? 'dark' : 'light'
  );
});
</script>

<!-- Two-way input binding -->
<input data-dd-bind="userName" type="text">
<input data-dd-bind="darkMode" type="checkbox">

<!-- One-way output -->
<span data-dd-output="userName"></span>

<!-- Attribute output -->
<img data-dd-output-attr="src:avatarUrl">

<!-- Conditionals -->
<div data-dd-if="darkMode">Dark is on</div>
<div data-dd-if="userName==Jane">Hello Jane!</div>
<div data-dd-if="userName!=Jane">Not Jane</div>

<!-- Toggle class -->
<div data-dd-class="darkMode:is-dark">…</div>

Copy all code examples from this section

Hash Router

JS

Usage

<script>
dd.router({
  '/':           () => store.set('page', 'home'),
  '/about':      () => store.set('page', 'about'),
  '/users/:id':  ({ id }) => store.set('userId', id),
  '*':           ({ path }) => store.set('page', '404'),
});

// Navigate programmatically
dd.navigate('/about');
dd.navigate('/users/42');
</script>

<!-- Link navigation (no # prefix needed) -->
<a data-dd-route="/about">About</a>
<a data-dd-route="/users/42">User 42</a>

<!-- Or standard hash links -->
<a href="#/about">About</a>

<!-- Tie to conditional rendering -->
<section data-dd-if="page==home">Home</section>
<section data-dd-if="page==about">About</section>

<!-- Listen to route events -->
<script>
dd.on('dd:route', ({ path, params }) => {
  console.log('Route:', path, params);
});
</script>

Copy all code examples from this section

Utility Classes

All dd- prefixed, all !important

Spacing scale: 1=.25rem · 2=.5rem · 3=1rem · 4=1.5rem · 5=3rem

Display

dd-hiddendd-blockdd-flexdd-inline-flexdd-grid-ddd-inline

Flex

dd-items-centerdd-items-startdd-items-enddd-justify-centerdd-justify-betweendd-justify-enddd-flex-coldd-flex-wrapdd-flex-1dd-flex-shrink-0

Text

dd-text-leftdd-text-centerdd-text-rightdd-truncatedd-nowrapdd-uppercasedd-capitalizedd-muteddd-faintdd-brand-textdd-success-textdd-danger-text

Spacing

dd-m-0dd-mt-0→5dd-mb-0→5dd-mx-autodd-p-0→5dd-px-2,3,4dd-py-2,3,4dd-gap-0→5

Visual

dd-rounded-xs/sm/md/lg/xl/fulldd-shadow-sm/md/lg/nonedd-borderdd-border-softdd-border-nonedd-bgdd-bg-surfacedd-bg-softdd-bg-dark

Typography

dd-fw-300/400/500/600/700/800/900dd-fs-xs/sm/base/lg/xl/2xl/3xl

Misc

dd-w-fulldd-h-fulldd-h-screendd-img-coverdd-img-containdd-pointerdd-select-nonedd-overflow-hiddendd-list-nonedd-relativedd-absolute

Copy all code examples from this section

Responsive Visibility

Utilities — sm/md/lg/xl

Breakpoints

<!-- Hide at breakpoint -->
<div class="dd-hide-sm">Hidden on mobile ≤576px</div>
<div class="dd-hide-md">Hidden on tablet ≤768px</div>
<div class="dd-hide-lg">Hidden on small desktop ≤1024px</div>
<div class="dd-hide-xl">Hidden on large screens >1024px</div>

<!-- Show ONLY at breakpoint -->
<div class="dd-show-sm">Only on mobile</div>
<div class="dd-show-md">Only on tablet</div>
<div class="dd-show-lg">Only on small desktop</div>
<div class="dd-show-xl">Only on large screens</div>

Copy all code examples from this section

DivDrop — Component Playground

Themes

Quick Start

Design Tokens

Header + Logo

Standalone Pill Nav

Buttons

Panels

Badges

Alerts

Avatars

Skeleton Loaders

Divider

Breadcrumb

Pagination

CSS Tooltips

Forms

Tables

Progress & Loader

Dropdown

Modal

Drawer

Tabs

Accordion

JavaScript API

Reveal

Typewriter

Marquee

Counter

0

0

0

0

Toast

data-dd-repeat

Reactive Store + Binding

Hash Router

Utility Classes

Responsive Visibility

DivDrop Modal

Small modal