---
title: Steps with line
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n    const [steps, setStep] = useState({\n        stepsItems: [\"Profile\", \"Contact\", \"Identity\", \"Passport\"],\n        currentStep: 2\n    })\n\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 pt-16 md:px-8\">\n            <ul aria-label=\"Steps\" className=\"items-center text-gray-600 md:flex\">\n                {steps.stepsItems.map((item, idx) => (\n                    <li aria-current={steps.currentStep == idx + 1 ? \"step\" : false} className=\"flex-1 flex md:items-center\">\n                        <div className={`flex-1 flex items-center gap-x-3 md:block ${idx != 0 ? \"md:space-x-10\" : \"\"}`}>\n                            <span className={`block h-24 w-1 md:w-full md:h-1 ${steps.currentStep > idx + 1 ? \"bg-indigo-600\" : \"bg-gray-200\"}`}></span>\n                            <div className=\"md:mt-2\">\n                                <p className={`text-sm ${steps.currentStep > idx + 1 ? \"text-indigo-600\" : \"\"}`}>Step {idx + 1}</p>\n                                <h3 className=\"mt-1 font-medium\">\n                                    {item}\n                                </h3>\n                            </div>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}","vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <ul aria-label=\"Steps\" class=\"items-center text-gray-600 md:flex\">\n      <li\n        v-for=\"(item, idx) in stepsItems\"\n        :key=\"idx\"\n        :aria-current=\"currentStep === idx + 1 ? 'step' : false\"\n        class=\"flex-1 flex md:items-center\"\n      >\n        <div :class=\"{'flex-1 flex items-center gap-x-3 md:block': true, 'md:space-x-10': idx !== 0}\">\n          <span\n            :class=\"{'block h-24 w-1 md:w-full md:h-1': true, 'bg-indigo-600': currentStep > idx + 1, 'bg-gray-200': !(currentStep > idx + 1)}\"\n          ></span>\n          <div class=\"md:mt-2\">\n            <p :class=\"{'text-sm': true, 'text-indigo-600': currentStep > idx + 1}\">Step {{ idx + 1 }}</p>\n            <h3 class=\"mt-1 font-medium\">{{ item }}</h3>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      stepsItems: [\"Profile\", \"Contact\", \"Identity\", \"Passport\"],\n      currentStep: 2,\n    };\n  },\n};\n</script>","label":"App.vue"}]},"react":{"jsxTail":[{"label":"App.jsx","code":"import { useState } from \"react\"\n\nexport default () => {\n\n    const [steps, setStep] = useState({\n        stepsItems: [\"Profile\", \"Contact\", \"Identity\", \"Passport\"],\n        currentStep: 2\n    })\n\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n            <ul aria-label=\"Steps\" className=\"items-center text-gray-600 md:flex\">\n                {steps.stepsItems.map((item, idx) => (\n                    <li aria-current={steps.currentStep == idx + 1 ? \"step\" : false} className=\"flex-1 flex md:items-center\">\n                        <div className={`flex-1 flex items-center gap-x-3 md:block ${idx != 0 ? \"md:space-x-10\" : \"\"}`}>\n                            <span className={`block h-24 w-1 md:w-full md:h-1 ${steps.currentStep > idx + 1 ? \"bg-indigo-600\" : \"bg-gray-200\"}`}></span>\n                            <div className=\"md:mt-2\">\n                                <p className={`text-sm ${steps.currentStep > idx + 1 ? \"text-indigo-600\" : \"\"}`}>Step {idx + 1}</p>\n                                <h3 className=\"mt-1 font-medium\">\n                                    {item}\n                                </h3>\n                            </div>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}"}],"jsxCss":[]},"html":{"htmlTail":[{"code":"<div x-data=\"{ steps: ['Profile', 'Contact', 'Identity', 'Passport'], currentStep: 2 }\" class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <ul aria-label=\"Steps\" class=\"items-center text-gray-600 md:flex\">\n        <template x-for=\"(item, idx) in steps\" :key=\"idx\">\n            <li :aria-current=\"currentStep == idx + 1 ? 'step' : false\" class=\"flex-1 flex md:items-center\">\n                <div :class=\"{'flex-1 flex items-center gap-x-3 md:block': true, 'md:space-x-10': idx != 0}\">\n                    <span :class=\"{'block h-24 w-1 md:w-full md:h-1': true, 'bg-indigo-600': currentStep > idx + 1, 'bg-gray-200': !(currentStep > idx + 1)}\"></span>\n                    <div class=\"md:mt-2\">\n                        <p :class=\"{'text-sm': true, 'text-indigo-600': currentStep > idx + 1}\">Step <span x-text=\"idx + 1\"></span></p>\n                        <h3 class=\"mt-1 font-medium\" x-text=\"item\"></h3>\n                    </div>\n                </div>\n            </li>\n        </template>\n    </ul>\n</div>","label":"index.html"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let stepsItems = [\"Profile\", \"Contact\", \"Identity\", \"Passport\"];\n  let currentStep = 2;\n</script>\n\n<div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <ul aria-label=\"Steps\" class=\"items-center text-gray-600 md:flex\">\n        {#each stepsItems as item, idx}\n        <li aria-current={currentStep == idx + 1 ? 'step' : false} class=\"flex-1 flex md:items-center\">\n            <div class={`flex-1 flex items-center gap-x-3 md:block ${idx != 0 ? 'md:space-x-10' : ''}`}>\n                <span class={`block h-24 w-1 md:w-full md:h-1 ${currentStep > idx + 1 ? 'bg-indigo-600' : 'bg-gray-200'}`}></span>\n                <div class=\"md:mt-2\">\n                    <p class={`text-sm ${currentStep > idx + 1 ? 'text-indigo-600' : ''}`}>Step {idx + 1}</p>\n                    <h3 class=\"mt-1 font-medium\">\n                        {item}\n                    </h3>\n                </div>\n            </div>\n        </li>\n        {/each}\n    </ul>\n</div>\n"}]}}
slug: /steps
id: 0abbdf6c-9ad5-4253-9445-dd28d0306f17
created_at: 1669578316300
---

<FUIStepsWithLine />