Components

Buttons

dd-button

Live playground

Variant:

Size:

Shape:

Label:

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

All variants

Buttons

Badges

dd-badge

Live playground

Badge

Variant:

Label:

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

All variants

DefaultSoftSuccessDangerWarningInfo

Badges

Alerts

dd-alert

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>

Alerts

Panels

dd-panel

All variants

Header

Default

Lifts on hover.

Dark panel

Always dark.

Static

No hover lift.

<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.</p>
  </div>
  <div class="dd-panel-foot">Footer</div>
</div>

Panels

Avatars

dd-avatar

Sizes + group

AB

CD

EF

A

B

C

+4

<div class="dd-avatar">JD</div>
<div class="dd-avatar dd-avatar-xl">
  <img src="photo.jpg" alt="">
</div>
<div class="dd-avatar-group">
  <div class="dd-avatar">A</div>
  <div class="dd-avatar">+3</div>
</div>

Avatars

Modal

dd-modal

Live demo

<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 class="dd-button" data-dd-modal-close>Close</button>
    </div>
  </div>
</div>

Modals

Tabs

dd-tabs

Live

Overview content — shown by default.

Code tab content.

Settings panel content.

<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>

Tabs

Accordion

dd-accordion

Single-open mode

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

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

Set data-dd-theme="forest" on your html tag. Done.

<div class="dd-stack dd-stack-sm" data-dd-accordion-single>
  <div class="dd-accordion-item is-open">
    <button class="dd-accordion-trigger">Question?</button>
    <div class="dd-accordion-panel">Answer.</div>
  </div>
</div>

Accordion

Toast

dd-toast

All types

<button data-dd-toast="Message" data-dd-toast-type="success">Toast</button>

<!-- Programmatic -->
DD.toast({ title:'Done', message:'Saved.', type:'success' });

Toast

Skeleton

dd-skeleton

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>

Skeleton

Tooltip · Breadcrumb · Pagination

CSS-only

Tooltips — hover each

<button data-dd-tooltip="Tooltip text">Hover</button>
<button data-dd-tooltip="Bottom" data-dd-tooltip-pos="bottom">…</button>

Breadcrumb

<ol class="dd-breadcrumb">
  <li><a href="/">Home</a></li>
  <li>Current</li>
</ol>

Pagination

«123»

<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">»</span>
</div>

UI extras

Buttons

Badges

Alerts

Panels

Avatars

Modal

Tabs

Accordion

Toast

Skeleton

Tooltip · Breadcrumb · Pagination

Modal demo

Small modal

Modal demo

Small modal