See Dew in your colourBlue

Dew

A switch whose knob turns into a drop of glass while you hold it.

A UI component for any site
Plain HTML, CSS and JavaScript, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleEvery component: 26 pieces for $98, you save $32

Dew: a look at the source

// Dew — iOS-style switch. Tap, drag the knob, or press Space/Enter. No dependencies.

export function init(root, { onChange } = {}) {
  if (!root.querySelector('.dew-knob')) {
    const knob = document.createElement('span');
    knob.className = 'dew-knob';
    root.append(knob);
  }
  root.setAttribute('role', 'switch');
  if (!root.hasAttribute('aria-checked')) root.setAttribute('aria-checked', 'false');

  let drag = null;
  const isOn = () => root.getAttribute('aria-checked') === 'true';
  const travel = () => {
    const knob = root.querySelector('.dew-knob');
    return root.clientWidth - knob.offsetWidth - knob.offsetLeft * 2;
  };

  function set(on, emit = true) {
    if (on === isOn()) return;
    root.setAttribute('aria-checked', String(on));
    if (emit) {
      onChange?.(on);
      root.dispatchEvent(new CustomEvent('dew:change', { detail: { checked: on }, bubbles: true }));
    }
  }

  const onDown = e => {
    if (root.disabled || e.button > 0) return;
    try { root.setPointerCapture(e.pointerId); } catch {}
    root.classList.add('is-pressed');
    drag = { id: e.pointerId, x0: e.clientX, p0: isOn() ? 1 : 0, moved: false };
  };
  const onMove = e => {
    if (!drag || e.pointerId !== drag.id) return;
    const dx = e.clientX - drag.x0;
    if (!drag.moved && Math.abs(dx) < 3) return;
    drag.moved = true;
    root.classList.add('is-dragging');
    const p = Math.max(0, Math.min(1, drag.p0 + dx / travel()));
…  40 more lines in the zip

/* Dew — a switch whose knob turns into a drop of glass while you hold it */
@property --dew-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.dew {
  --dew-on: #34c759;
  --dew-off: rgb(120 120 128 / .2);
  --dew-knob: #fff;
  --dew-accent: #007aff;
  --dew-w: 62px;
  --dew-h: 28px;
  --dew-pad: 2px;
  --dew-knob-w: 38px;
  --dew-spring: cubic-bezier(.34, 1.45, .64, 1);
  --dew-travel: calc(var(--dew-w) - var(--dew-knob-w) - var(--dew-pad) * 2);

  appearance: none;
  border: 0;
  padding: 0;
  flex: none;
  position: relative;
  width: var(--dew-w);
  height: var(--dew-h);
  border-radius: 999px;
  cursor: pointer;
  background: color-mix(in srgb, var(--dew-on) calc(var(--dew-p) * 100%), var(--dew-off));
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .04), inset 0 1px 2px rgb(0 0 0 / .06);
  transition: --dew-p 420ms var(--dew-spring);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.dew[aria-checked="true"] { --dew-p: 1; }
.dew.is-dragging { transition: none; }
.dew:focus-visible { outline: 2px solid var(--dew-accent); outline-offset: 2px; }
.dew:disabled { opacity: .45; cursor: not-allowed; }

.dew-knob {
…  50 more lines in the zip

Ask a question

What it does

An on/off switch in the iOS 26 style. While you press it, the knob swells past the track and turns into clear glass. When you let go, it slides across with a soft bounce.

Good for: Settings pages, preference panels, pricing toggles, mobile web apps.
How it works: Tap to toggle, or hold and drag the knob. The track fills with green as the knob moves, and letting go past the middle switches it on.
How to use: Copy two files, add a <button> per switch, call initAll(). Listen with onChange or the dew:change event.

Price: $5, one payment
Version: 1.0.0
Code size: 2.1 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Toggle
Licence: Unlimited personal and client projects
In the zip: dew.css dew.jsthe component
index.htmla plain example page
README.md package.json vite.config.js LICENSE.md

Use it in your project

Copy dew.css and dew.js into your project.
Add the markup from index.html (the block between the COMPONENT comments). Give it a label with aria-labelledby or aria-label.
Start it:

import { init, initAll } from './dew.js';
const wifi = init(document.querySelector('.dew'), { onChange: on => console.log(on) });
// or every switch on the page:
initAll('.dew');

Set the starting state with aria-checked="true". Each switch also fires a bubbling dew:change event with detail.checked.

useEffect(() => {
  const sw = init(ref.current, { onChange });
  return () => sw.destroy();
}, []);

Questions

What exactly do I get?

The full source, a demo page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Do I need React?

No. The README shows how to use it in React or Next.js.

Is it a real switch for screen readers?

Yes. It's a <button role="switch"> with aria-checked, and Space and Enter work.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Dew

All toggles

index.html

<nav class="abacus" aria-label="Pagination">
  <button class="abacus-end abacus-prev" type="button"></button>
  <div class="abacus-rail"></div>
  <button class="abacus-end abacus-next" type="button"></button>
</nav>

abacus.css

.abacus-end {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--abacus-post);
  height: calc(var(--abacus-bead-h) + 10px);
  margin: 0;
  padding: 0;
  border: 0;

abacus.js

export function init(root, {
  pages = 9,
  page = 1,
  window: win = 7,        // beads shown at once when there are more than 12 pages (odd numbers work best)
  onChange,
  onPreview,              // called while a bead is pulled, with the page it would land on
  drag = true,            // pull beads along the rod with a finger or the mouse
  duration = 440,         // ms a bead takes to cross the gap and settle
  stagger = 40,           // ms between beads in a chain
  labels = {},
} = {}) {

Abacus

Pagination where numbered beads slide along a metal rod and clack into place

11.3 KB0 depsNavigation

index.html

<div class="aperture">
  <header class="aperture-bar">
    <a class="aperture-brand" href="#">Nocturne</a>
    <button class="aperture-toggle" type="button" aria-label="Menu">
      <svg class="aperture-iris" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="aperture-rim-g" gradientUnits="userSpaceOnUse" x1="8" y1="6" x2="56" y2="60">
            <stop offset="0" class="aperture-rim-a"/><stop offset=".42" class="aperture-rim-b"/><stop offset=".6" class="aperture-rim-c"/><stop offset="1" class="aperture-rim-d"/>
          </linearGradient>
          <linearGradient id="aperture-steel-g" gradientUnits="userSpaceOnUse" x1="6" y1="4" x2="58" y2="62">
            <stop offset="0" class="aperture-steel-a"/><stop offset=".34" class="aperture-steel-b"/><stop offset=".52" class="aperture-steel-c"/><stop offset="1" class="aperture-steel-d"/>

aperture.css

.aperture-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aperture-plate);
  box-shadow: inset 0 1px 0 var(--aperture-plate-hi), 0 1px 0 var(--aperture-plate-edge), var(--aperture-plate-shadow);
  transition: opacity 240ms var(--aperture-ease-out);
}
.aperture.is-open .aperture-bar::before { opacity: 0; }
.aperture-brand {

aperture.js

export function init(root, { onOpen, onClose, onSelect, onPreview, push, drag = true } = {}) {
  const toggle = root.querySelector('.aperture-toggle');
  const iris = toggle.querySelector('.aperture-iris');
  const menu = root.querySelector('.aperture-menu');
  const list = menu.querySelector('.aperture-list');
  const readout = root.querySelector('.aperture-readout-n');
  const glass = iris.querySelector('.aperture-glass');
  const flare = iris.querySelector('.aperture-flare');
  const links = [...menu.querySelectorAll('.aperture-link')];
  const blades = [...iris.querySelectorAll('.aperture-blade')];

Aperture

A menu button whose iris blades open into a full-screen menu and snap shut like a shutter

11.9 KB0 depsNavigation

index.html

<nav class="dimple" aria-label="Main">
  <button class="dimple-tab" type="button" aria-selected="true" data-value="home" data-tint="#ffb238">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/><path class="dimple-line" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/></svg>
    <span class="dimple-label">Home</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="explore" data-tint="#36d695">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17z"/><path class="dimple-line" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zM15.5 8.5l-2 5-5 2 2-5z"/></svg>
    <span class="dimple-label">Explore</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="inbox" data-tint="#ff6b57">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/><path class="dimple-line" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18zM3.5 13H8l1.5 2.5h5L16 13h4.5"/></svg>

dimple.css

.dimple {
  --dimple-h: 64px;                 /* the bar itself */
  --dimple-head: 30px;              /* room above the bar for the drop to hop */
  --dimple-drop: 46px;              /* drop diameter */
  --dimple-radius: 26px;            /* bar corners */
  --dimple-width: 420px;
  --dimple-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

  --dimple-bar-top: #ffffff;
  --dimple-bar-bottom: #eef0f5;
  --dimple-rim: rgb(255 255 255 / .95);

dimple.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.dimple-tab')];
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const tintOf = t => t.dataset.tint || '';

  let index = Math.max(0, tabs.findIndex(t => t.getAttribute('aria-selected') === 'true'));
  root.setAttribute('role', 'tablist');
  tabs.forEach(t => {
    t.setAttribute('role', 'tab');
    t.setAttribute('aria-selected', 'false');
    t.tabIndex = -1;

Dimple

A bottom tab bar where a coloured drop hops between dips in the bar and lands with a ripple

8.4 KB0 depsNavigation

index.html

<!-- one real input; js
     draws each piece's
     outline as an svg -->
<div class="dovetail-row">
  <input
    class="dovetail-input"
    …>
  <span
    class="dovetail-piece"
    aria-hidden="true">
  </span>

dovetail.css

/* js sets each slide's
   length; a cut-off one
   resumes where it is */
.dovetail-piece {
  translate: 0 0;
  transition:
    translate
    var(--dovetail-move)
    var(--dovetail-glide), …
.dovetail-piece.is-lifted {
  … scale: 1.06; }

dovetail.js

// tab and socket share
// points: they meet exactly
function outline(s,
  socket, tab) {
  return rounded([
    ...(tab ?
      tabPoints(W, s) : []),
    …
    ...(socket ?
      tabPoints(0, s)
      .reverse() : []),

Dovetail

A one-time code field of puzzle pieces that slide together and lock into a check

11 KB0 depsForms

What it does

Use it in your project

Questions

More like Dew

Abacus

Aperture

Dimple

Dovetail

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Dew

Abacus

Aperture

Dimple

Dovetail