Stepper

The stepper component can be used to show a numbered list of steps next to a form component to indicate the progress and number of steps that are required to complete and submit the form data.

Usage

To create a stepper, just add the .uk-stepper class to a <ul> tag.

<ul class="uk-stepper uk-stepper-default">
  <li>
    <a href="#">Personal Info</a>
  </li>
  <li>
    <a href="#">Account Info</a>
  </li>
  <li>
    <a href="#">Confirmation</a>
  </li>
</ul>
Copy to clipboard
  • <ul class="uk-stepper uk-stepper-default">
      <li>
        <a href="#">Personal Info</a>
      </li>
      <li>
        <a href="#">Account Info</a>
      </li>
      <li>
        <a href="#">Confirmation</a>
      </li>
    </ul>

Active modifier

This example can be used to highlight the current step in the stepper, indicating which step is actively being worked on.

Note When you add the .uk-active class to one of your li tags, the previous li tags will automatically change colors.

Copy to clipboard
  • <ul class="uk-stepper uk-stepper-default">
      <li>
        <a href="#">Personal Info</a>
      </li>
      <li class="uk-active">
        <a href="#">Account Info</a>
      </li>
      <li>
        <a href="#">Confirmation</a>
      </li>
    </ul>

Checked modifier

To show a checkmark when the step has been finished, add the .uk-stepper-checked to one of your li tag.

Copy to clipboard
  • <ul class="uk-stepper uk-stepper-default">
      <li class="uk-stepper-checked">
        <a href="#">Personal Info</a>
      </li>
      <li class="uk-active">
        <a href="#">Account Info</a>
      </li>
      <li>
        <a href="#">Confirmation</a>
      </li>
    </ul>

Counter modifier

This example can be used to display step numbers within the stepper, helping to indicate the sequence of steps. Each li tag will be numbered to show its position in the progression.

Copy to clipboard
  • <ul class="uk-stepper uk-stepper-default uk-stepper-counter">
      <li class="uk-stepper-checked">
        <a href="#">Personal Info</a>
      </li>
      <li class="uk-active">
        <a href="#">Account Info</a>
      </li>
      <li>
        <a href="#">Confirmation</a>
      </li>
    </ul>

Theme development

On your tailwind.config.js file, add the Stepper component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        stepper: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-stepper.uk-stepper
hook-misc*