Smart Wizard v7 keeps the jQuery wizard and modernises it

The same plugin, rewritten in TypeScript

The positioning is careful in the README. jQuery Smart Wizard v7 is a lightweight and extensible step wizard plugin built for modern web applications using jQuery, providing a clean interface for multi-step processes such as registration forms, checkout screens, surveys and configuration flows, and it adapts whether you are building a simple step form or a complex workflow. The v7 line is described as fully rewritten in TypeScript with built-in type declarations, and the manifest confirms it, with `types` pointing at `dist/types/index.d.ts` and separate ESM, CommonJS and browser builds. The requirement is jQuery 1.11.1 or above, and the README states that jQuery 4.x and the Slim builds are supported as well, with jQuery itself declared as a peer dependency rather than bundled.

Installing from npm, yarn or a CDN

The package is published as `smartwizard`. With npm:

npm install smartwizard

or with yarn:

yarn add smartwizard

For a page that is not built with a bundler, the CSS and the script are pulled from jsDelivr, and note that the base stylesheet and a theme stylesheet are separate files:

<link href="https://cdn.jsdelivr.net/npm/smartwizard@7/dist/css/smartwizard.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/smartwizard@7/dist/css/themes/arrows.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/smartwizard@7/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>

The same three files are available on unpkg. When you do use a bundler, the ES module form imports jQuery, the two stylesheets and the plugin itself:

import $ from "jquery";
import "smartwizard/dist/css/smartwizard.min.css";
import "smartwizard/dist/css/themes/arrows.min.css";
import smartWizard from "smartwizard";

$(function() {
    $('#smartwizard').smartWizard();
});

A CommonJS variant is documented for webpack, and the plugin is UMD compatible so it can be dropped into an existing page as a plain script.

Themes, colour variables and six transitions

The visual system is two layers. There are four built-in themes, `basic`, `arrows`, `glow` and `pills`, and above them colour customisation is done with CSS variables, so a brand colour is a variable change rather than a stylesheet rewrite. Display mode follows the system with light, dark and auto support, and the design is described as responsive and mobile ready. Transitions are the other half. The built-in list is `default`, `fade`, `slideHorizontal`, `slideVertical`, `slideSwing` and `css`, the plugin is compatible with CSS animation libraries including Animate.css, and the transition system is extensible with custom animation handlers. The `css` option is the one to understand, because returning the child directly from a custom handler is how you disable the animation.

Step states, runtime options and how navigation is driven

The feature list is long, and the entries that change how you build a form are the interesting ones. There is a comprehensive set of step states, `completed`, `active`, `disabled`, `hidden`, `error` and `warning`, and options can be changed at run time through `setOptions()`. Navigation is event driven, with form validation supported through the `leave.sw` event, which fires as the user tries to leave a step, and external navigation controls are supported if you would rather drive the flow yourself. Content is not fixed, since a `contentLoader` callback can pull content in dynamically and the container height adjusts automatically, and there is a customisable toolbar that accepts additional HTML elements, an integrated progress bar, and URL hash navigation with browser history integration. When the steps overflow the available width, the navigation scrolls horizontally and the mouse wheel is supported, and the left and right arrow keys move between steps.

Accessibility, RTL and the browser floor

Accessibility is named in the product description and again in the feature list, where accessible navigation controls sit alongside keyboard navigation, and the project also supports right-to-left languages. The other thing to note is the compatibility statement, which lists jQuery 1.11.1, jQuery 3.x, jQuery 4.x and the Slim variants, and the feature list adds that it is compatible with all modern browsers. The markup the plugin expects is small, with a `div` holding a `ul` of navigation items, each an anchor pointing at a step, and the README calls the HTML structure minimal and clean, with the step content added by you. The examples directory shows the shapes that come with it, including `ajax.html`, `multiple.html`, `rtl.html` and `validation.html`, so the behaviour for a page that loads its steps over ajax, a page with several wizards, a right-to-left layout and a form with validation can be seen before you write any of it.

The successor package, and where this one fits

The README spends its most prominent section on a different repository. The author has launched SmartWizard, described as a modern, framework-agnostic, standalone continuation of the original plugin, redesigned from the ground up with TypeScript, enhanced accessibility, modern tooling and first-class React and Vue support, all without any jQuery dependencies. The motivation list for the new package is framework-agnostic, free from jQuery, flexible and extensible, built with modern JavaScript and TypeScript, with React and Vue support, and powered by modern tooling. The guidance is that the original jQuery SmartWizard will remain active and available for existing jQuery based projects, and that if you are starting a new project, or need modern JavaScript, React or Vue support, you should try the next generation package. In other words, this repository is where you look for the jQuery line, and the sibling project is where you look for a new build.

Build tooling, migrations and the release pace

The repository is a TypeScript source tree with a Rollup build, Jest for unit tests and Playwright for end to end tests, and the scripts make the order explicit, with `test` running a build before the unit suite and `test:all` running the build, the unit tests and the end to end tests in sequence. The build script emits declarations with `tsc --emitDeclarationOnly` before Rollup bundles, which is what keeps the `types` entry honest. A `MIGRATING.md` at the root is the document to read when moving between major versions. The licence is MIT in the manifest and in the badge, while the platform classifies the repository licence as a custom one it cannot map to a standard identifier, so the `LICENSE` file is the text to check. The release history is active, with v7.0.2 in June 2026, v7.1.0 on 2026-10-14 and v7.1.2 on 2026-10-18, and the last push was on 2026-10-18.

Editorial conclusion

Adopt Smart Wizard v7 when you are building a multi-step flow in a jQuery codebase and want typed declarations, theming through CSS variables and a maintained plugin rather than an old jQuery UI script. Do not adopt it for a new React or Vue project, because the README recommends the separate SmartWizard package for that, which is framework-agnostic and has no jQuery dependency. Verify first how the plugin's transitions and validation hooks behave with your form, since step navigation is driven by events such as `leave.sw` and a `contentLoader` callback rather than by a router, and read `MIGRATING.md` before upgrading from an earlier major version.

Frequently asked questions

Official sources

1. Issues
2. Project website
3. README
4. Releases
5. techlab/jquery-smartwizard on GitHub