Requires David UI JS

Tailwind CSS Stepper

Guide users through multi-step workflows with the stepper component from David UI. Styled with Tailwind CSS, it’s ideal for forms, tutorials, or processes.

This component is perfect for form completion, checkout workflows, or multi-step tasks, by dividing the journey into distinct, manageable steps.

See David UI's stepper examples to integrate structured navigation effortlessly.

Basic Stepper

A straightforward stepper component that uses numbered circles to represent progress through a sequence of steps. Inactive steps are visually distinguished to indicate the current progress.

1
2
3

Step 2 Content

This is the content for step 2. Add whatever content you need here.

Stepper With Icon

A stepper with icons inside the steps for added visual representation. Each step features unique graphics, offering a more engaging and informative design.

Step 2 Content

This is the content for step 2. Add whatever content you need here.

Stepper With Dots

A minimalist stepper that uses small dots to indicate progress. The compact design makes it ideal for simple workflows or space-limited interfaces.

Step 2 Content

This is the content for step 2. Add whatever content you need here.

Stepper With Content

This stepper pairs each step with additional content such as a title and description, making it suitable for guiding users through detailed multi-step processes.

Home
Profile
Settings

This is the content for step 2. Add whatever content you need here.

Stepper Custom Styles

A customizable stepper with a unique style, including rounded edges and tailored colors, offering a modern look to fit diverse design requirements.

Step 2 Content

This is the content for step 2. Add whatever content you need here.

Required Script

The Stepper component in david-ai requires JavaScript to handle the step functionality. The library provides smooth transitions and navigation behavior through data attributes.

Installation

To use the Stepper component in your project, you first need to install the david-ai library via npm:

Basic Usage

Using with Global Access

If you prefer, you can use the DavidAI global object instead of directly importing initStepper:

Using with CDN

You can include david-ai via a CDN and initialize stepper functionality globally in the browser. Add the following script to your HTML file:

HTML Code Example

TypeScript

David AI Stepper component can be used programmatically with TypeScript support for more control and type safety:

Programmatic Usage with TypeScript

Learn how to use David AI's Stepper component with TypeScript for multi-step navigation control. This component provides programmatic methods to navigate between steps, track progress, and configure the stepper behavior with full type safety and customization options.

HTML Structure

The HTML structure demonstrates an accessible and interactive stepper component featuring:

  • Numbered step indicators with active/completed states
  • Progress bar between steps showing completion status
  • ARIA attributes for accessibility support
  • Content panels for each step that show/hide dynamically
  • Navigation buttons for moving between steps
  • Dark and light theme compatibility with Tailwind CSS
  • Responsive design that adapts to different screen sizes
  • Data attributes for state management
  • Customizable styling through Tailwind classes
  • Programmatic control through JavaScript methods

Here's the complete HTML implementation:

Props & Methods

The Stepper component provides a way to guide users through multi-step processes. It supports customizable step indicators, content elements, and navigation controls through methods like next, previous, and direct step navigation.


InterfaceProperty/MethodTypeDescription
StepperConfigstepElementsHTMLElement[]Array of HTML elements representing the step indicators.
StepperConfigcontentElementsHTMLElement[]Array of HTML elements containing the content for each step.
StepperConfigprevButtonHTMLElementHTML element for the 'previous' navigation button.
StepperConfignextButtonHTMLElementHTML element for the 'next' navigation button.
StepperConfiginitialStepnumber (optional)Optional initial step number (defaults to 1 if not provided).
ISteppernext()voidAdvances to the next step if available.
IStepperprev()voidReturns to the previous step if available.
ISteppergoToStep(step: number)voidJumps to a specific step number.
ISteppergetCurrentStep()numberReturns the current active step number.
IStepperdestroy()voidDestroys the Stepper instance, cleaning up event listeners and references.