Checklist Themes

Each theme below is plain CSS on top of the default checklist styles. To use one, copy its CSS into your stylesheet, then pass its class name to the checklist:

import { checklist } from "driver.js/checklist";
import "driver.js/dist/driver.css";
import "driver.js/dist/checklist.css";
import "./checklist-theme.css"; // The CSS you copied

checklist({
  id: "onboarding",
  className: "checklist-gradient",
  items,
}).show();

The themes only change how the checklist looks, so you can mix their rules or use one as a starting point for your own. See Styling for every class name you can target.

Gradient Header

A bold, colored header that carries your brand. The launcher turns into a gradient pill.

.driver-checklist.checklist-gradient {
  --driver-checklist-color: #7c3aed;
}

.driver-checklist.checklist-gradient .driver-checklist-launcher {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.driver-checklist.checklist-gradient .driver-checklist-launcher-count {
  padding: 2px 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.driver-checklist.checklist-gradient .driver-checklist-panel {
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(76, 29, 149, 0.2);
}

.driver-checklist.checklist-gradient .driver-checklist-header {
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
}

.driver-checklist.checklist-gradient .driver-checklist-title {
  font-weight: 700;
}

.driver-checklist.checklist-gradient .driver-checklist-description,
.driver-checklist.checklist-gradient .driver-checklist-progress-text {
  color: rgba(255, 255, 255, 0.85);
}

.driver-checklist.checklist-gradient .driver-checklist-close-btn {
  color: rgba(255, 255, 255, 0.7);
}

.driver-checklist.checklist-gradient .driver-checklist-close-btn:hover {
  color: #fff;
}

.driver-checklist.checklist-gradient .driver-checklist-progress-bar {
  background-color: rgba(255, 255, 255, 0.3);
}

.driver-checklist.checklist-gradient .driver-checklist-progress-fill {
  background-color: #fff;
}

.driver-checklist.checklist-gradient .driver-checklist-items {
  padding-top: 8px;
}

Cards

Each item in its own card, with a chevron on the ones that do something. Done items turn green.

.driver-checklist.checklist-cards {
  --driver-checklist-color: #16a34a;
}

.driver-checklist.checklist-cards .driver-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 14px;
}

.driver-checklist.checklist-cards .driver-checklist-item {
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

/* A chevron on items that do something when clicked. */
.driver-checklist.checklist-cards
  .driver-checklist-item:has(button.driver-checklist-item-trigger, a.driver-checklist-item-trigger)::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border: solid #a3a3a3;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}

.driver-checklist.checklist-cards
  .driver-checklist-item:has(
    button.driver-checklist-item-trigger:hover,
    a.driver-checklist-item-trigger:hover,
    button.driver-checklist-check + div.driver-checklist-item-trigger:hover,
    .driver-checklist-item-trigger:focus-visible
  ) {
  border-color: #d4d4d4;
  background-color: #fafafa;
}

.driver-checklist.checklist-cards .driver-checklist-item-done {
  border-color: #bbf7d0;
  background-color: #f0fdf4;
}

.driver-checklist.checklist-cards .driver-checklist-item-done .driver-checklist-item-title {
  text-decoration: none;
}

Numbered Steps

Numbers instead of empty circles, for checklists meant to be done in order. CSS counters number the items, so there is nothing to add to the items themselves.

.driver-checklist.checklist-numbered .driver-checklist-items {
  counter-reset: checklist-step;
}

/* The number sits on the title's baseline, whatever the font. */
.driver-checklist.checklist-numbered .driver-checklist-item {
  counter-increment: checklist-step;
  align-items: baseline;
}

/* The circle shows the step number until the item is done. */
.driver-checklist.checklist-numbered .driver-checklist-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-color: #d4d4d4;
  font-size: 12px;
  font-weight: 600;
  color: #525252;
}

.driver-checklist.checklist-numbered .driver-checklist-check::after {
  content: counter(checklist-step);
}

/* Kept but hidden once done, so the circle still has a baseline to align by. */
.driver-checklist.checklist-numbered .driver-checklist-item-done .driver-checklist-check::after {
  color: transparent;
}

.driver-checklist.checklist-numbered .driver-checklist-item-done .driver-checklist-check {
  border-color: var(--driver-checklist-color, #2d2d2d);
}

Progress Ring

A ring around the launcher that fills up as items are done, with the number of items left inside it. The checklist sets --driver-checklist-progress to the progress as a percentage for the ring, {{remaining}} puts the count inside it, and {{percent}} shows the percentage in the panel:

checklist({
  id: "onboarding",
  className: "checklist-ring",
  progressText: "{{percent}}% complete",
  launcherProgressText: "{{remaining}}",
  items,
});

/* --driver-checklist-progress holds the progress as a percentage, so a
   conic gradient can draw it as a ring around the launcher's count. */
.driver-checklist.checklist-ring {
  --driver-checklist-color: #22c55e;
}

.driver-checklist.checklist-ring .driver-checklist-launcher {
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
}

.driver-checklist.checklist-ring .driver-checklist-launcher-count {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #2d2d2d 78%, transparent 80% 100%),
    conic-gradient(#22c55e var(--driver-checklist-progress), rgba(255, 255, 255, 0.2) 0);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.driver-checklist.checklist-ring .driver-checklist-progress-bar {
  height: 8px;
  border-radius: 4px;
}

.driver-checklist.checklist-ring .driver-checklist-progress-text {
  order: -1;
  font-weight: 600;
  color: #16a34a;
}

Compact

A small checklist that stays out of the way, for items that don’t need a description. The launcher counts what is left with {{remaining}}:

checklist({
  id: "onboarding",
  className: "checklist-compact",
  title: "Setup",
  launcherProgressText: "{{remaining}} left",
  items, // Titles only
});

.driver-checklist.checklist-compact .driver-checklist-launcher {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
}

@media (min-width: 481px) {
  .driver-checklist.checklist-compact .driver-checklist-panel {
    width: 260px;
  }
}

.driver-checklist.checklist-compact .driver-checklist-header {
  padding: 12px 14px 8px;
}

.driver-checklist.checklist-compact .driver-checklist-title {
  font-size: 15px;
}

.driver-checklist.checklist-compact .driver-checklist-progress {
  margin-top: 8px;
}

.driver-checklist.checklist-compact .driver-checklist-items {
  padding: 0 6px 6px;
}

.driver-checklist.checklist-compact .driver-checklist-item {
  gap: 8px;
  padding: 6px 8px;
}

.driver-checklist.checklist-compact .driver-checklist-item-title {
  font-size: 13px;
  font-weight: 500;
}

.driver-checklist.checklist-compact .driver-checklist-check {
  width: 14px;
  height: 14px;
}

GIF Banner

An image, GIF or animated illustration above the title, to make the welcome feel friendly. The description accepts HTML, so the image goes there, and the CSS moves it above the title:

checklist({
  id: "onboarding",
  className: "checklist-media",
  title: "Welcome to Foxbase",
  description: '<img src="/welcome.gif" alt="" /><p>Four quick steps to get you going.</p>',
  items,
});

/* The image goes in the description, as HTML. These rules lift it above the
   title as a banner, with the description text below. */
.driver-checklist.checklist-media .driver-checklist-header {
  display: flex;
  flex-direction: column;
}

.driver-checklist.checklist-media .driver-checklist-description {
  display: contents;
}

.driver-checklist.checklist-media .driver-checklist-description img {
  order: -1;
  display: block;
  width: 100%;
  height: 140px;
  margin-bottom: 12px;
  border: 1px solid #ececec;
  border-radius: 8px;
  object-fit: cover;
}

.driver-checklist.checklist-media .driver-checklist-description p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.driver-checklist.checklist-media .driver-checklist-close-btn {
  top: 22px;
  right: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 26px;
  color: #2d2d2d;
}

Midnight

A dark theme for dark apps, with a violet accent.

.driver-checklist.checklist-midnight {
  --driver-checklist-color: #a78bfa;
  color: #f3f4f6;
}

.driver-checklist.checklist-midnight .driver-checklist-launcher {
  border-color: #374151;
  background-color: #111827;
  color: #f9fafb;
}

.driver-checklist.checklist-midnight .driver-checklist-launcher:hover {
  background-color: #1f2937;
}

.driver-checklist.checklist-midnight .driver-checklist-launcher-count {
  color: #a78bfa;
}

.driver-checklist.checklist-midnight .driver-checklist-panel {
  border-color: #1f2937;
  background-color: #111827;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.driver-checklist.checklist-midnight .driver-checklist-description,
.driver-checklist.checklist-midnight .driver-checklist-progress-text,
.driver-checklist.checklist-midnight .driver-checklist-item-description {
  color: #9ca3af;
}

.driver-checklist.checklist-midnight .driver-checklist-close-btn {
  color: #6b7280;
}

.driver-checklist.checklist-midnight .driver-checklist-close-btn:hover {
  color: #f9fafb;
}

.driver-checklist.checklist-midnight .driver-checklist-progress-bar {
  background-color: #1f2937;
}

.driver-checklist.checklist-midnight .driver-checklist-check {
  border-color: #4b5563;
}

.driver-checklist.checklist-midnight .driver-checklist-item-done .driver-checklist-check {
  border-color: #a78bfa;
}

.driver-checklist.checklist-midnight .driver-checklist-item-done .driver-checklist-item-title {
  color: #6b7280;
}

.driver-checklist.checklist-midnight
  .driver-checklist-item:has(
    button.driver-checklist-item-trigger:hover,
    a.driver-checklist-item-trigger:hover,
    button.driver-checklist-check + div.driver-checklist-item-trigger:hover,
    .driver-checklist-item-trigger:focus-visible
  ) {
  background-color: #1f2937;
}

Celebration

A finished state that rewards the user. Once every item is done, the checklist shows completeTitle and completeDescription, the launcher shows completeLauncherText, and the CSS turns it green. This demo starts with three of four items done, so click the last one to see it.

checklist({
  id: "onboarding",
  className: "checklist-celebration",
  completeTitle: "You're all set! 🎉",
  completeDescription: "Nice work. You're ready to go.",
  completeLauncherText: "All done",
  items,
});

/* The widget gets .driver-checklist-complete once every item is done. */
.driver-checklist.checklist-celebration.driver-checklist-complete {
  --driver-checklist-color: #16a34a;
}

.driver-checklist.checklist-celebration.driver-checklist-complete .driver-checklist-launcher {
  border-color: #16a34a;
  background-color: #16a34a;
}

.driver-checklist.checklist-celebration.driver-checklist-complete .driver-checklist-header {
  background-color: #f0fdf4;
}

.driver-checklist.checklist-celebration.driver-checklist-complete .driver-checklist-title {
  font-weight: 600;
  color: #15803d;
  animation: checklist-celebration-pop 400ms ease-out;
}

@keyframes checklist-celebration-pop {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}

For confetti or a “You did it” modal, use the onComplete hook. It fires once when the last item is done:

checklist({
  id: "onboarding",
  items,
  onComplete: () => confetti(),
});

Brutalist

The theme of the driver.js homepage: thick borders, hard shadows and a yellow header.

/* The theme of the driver.js homepage. */
.driver-checklist.checklist-brutalist {
  --driver-checklist-color: #000;
}

.driver-checklist.checklist-brutalist .driver-checklist-launcher {
  padding: 10px 16px;
  border: 2px solid #000;
  border-radius: 12px;
  background-color: #fde047;
  color: #000;
  box-shadow: 3px 3px 0 0 #000;
}

.driver-checklist.checklist-brutalist .driver-checklist-launcher:hover {
  background-color: #facc15;
}

.driver-checklist.checklist-brutalist .driver-checklist-launcher:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #000;
}

.driver-checklist.checklist-brutalist .driver-checklist-launcher-count {
  padding: 2px 7px;
  border-radius: 999px;
  background-color: #000;
  color: #fde047;
}

.driver-checklist.checklist-brutalist .driver-checklist-panel {
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 4px 4px 0 0 #000;
}

.driver-checklist.checklist-brutalist .driver-checklist-header {
  border-bottom: 2px solid #000;
  background-color: #fde047;
}

.driver-checklist.checklist-brutalist .driver-checklist-title {
  font-weight: 700;
  color: #000;
}

.driver-checklist.checklist-brutalist .driver-checklist-items {
  padding-top: 7px;
}

.driver-checklist.checklist-brutalist .driver-checklist-description,
.driver-checklist.checklist-brutalist .driver-checklist-progress-text,
.driver-checklist.checklist-brutalist .driver-checklist-close-btn {
  color: rgba(0, 0, 0, 0.7);
}

.driver-checklist.checklist-brutalist .driver-checklist-progress-bar {
  height: 10px;
  border: 2px solid #000;
  background-color: #fff;
}

.driver-checklist.checklist-brutalist .driver-checklist-progress-fill {
  border-radius: 0;
}

.driver-checklist.checklist-brutalist .driver-checklist-check {
  border-color: #000;
}

.driver-checklist.checklist-brutalist
  .driver-checklist-item:has(
    button.driver-checklist-item-trigger:hover,
    a.driver-checklist-item-trigger:hover,
    button.driver-checklist-check + div.driver-checklist-item-trigger:hover,
    .driver-checklist-item-trigger:focus-visible
  ) {
  background-color: #fef9c3;
}