---
title: Steps with titles on the bottom
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxCss":[],"jsxTail":[{"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-2xl mx-auto px-4 md:px-0\">\n            <ul aria-label=\"Steps\" className=\"items-center text-gray-600 font-medium md:flex\">\n                {steps.stepsItems.map((item, idx) => (\n                    <li aria-current={steps.currentStep == idx + 1 ? \"step\" : false} className=\"flex gap-x-3 md:flex-col md:flex-1 md:gap-x-0\">\n                        <div className=\"flex flex-col items-center md:flex-row md:flex-1\">\n                            <hr className={`w-full border hidden md:block ${idx == 0 ? \"border-none\" : \"\" || steps.currentStep >= idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n                            <div className={`w-8 h-8 rounded-full border-2 flex-none flex items-center justify-center ${steps.currentStep > idx + 1 ? \"bg-indigo-600 border-indigo-600\" : \"\" || steps.currentStep == idx + 1 ? \"border-indigo-600\" : \"\"}`}>\n                                <span className={`w-2.5 h-2.5 rounded-full bg-indigo-600 ${steps.currentStep != idx + 1 ? \"hidden\" : \"\"}`}></span>\n                                {\n                                    steps.currentStep > idx + 1 ? (\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-5 h-5 text-white\">\n                                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                                        </svg>\n                                    ) : \"\"\n                                }\n                            </div>\n                            <hr className={`h-12 border md:w-full md:h-auto ${idx + 1 == steps.stepsItems.length ? \"border-none\" : \"\" || steps.currentStep > idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n                        </div>\n                        <div className=\"h-8 flex justify-center items-center md:mt-3 md:h-auto\">\n                            <h3 className={`text-sm ${steps.currentStep == idx + 1 ? \"text-indigo-600\" : \"\"}`}>\n                                {item}\n                            </h3>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}","label":"App.jsx"}]},"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-2xl mx-auto px-4 pt-16 md:px-0\">\n            <ul aria-label=\"Steps\" className=\"items-center text-gray-600 font-medium md:flex\">\n                {steps.stepsItems.map((item, idx) => (\n                    <li aria-current={steps.currentStep == idx + 1 ? \"step\" : false} className=\"flex gap-x-3 md:flex-col md:flex-1 md:gap-x-0\">\n                        <div className=\"flex flex-col items-center md:flex-row md:flex-1\">\n                            <hr className={`w-full border hidden md:block ${idx == 0 ? \"border-none\" : \"\" || steps.currentStep >= idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n                            <div className={`w-8 h-8 rounded-full border-2 flex-none flex items-center justify-center ${steps.currentStep > idx + 1 ? \"bg-indigo-600 border-indigo-600\" : \"\" || steps.currentStep == idx + 1 ? \"border-indigo-600\" : \"\"}`}>\n                                <span className={`w-2.5 h-2.5 rounded-full bg-indigo-600 ${steps.currentStep != idx + 1 ? \"hidden\" : \"\"}`}></span>\n                                {\n                                    steps.currentStep > idx + 1 ? (\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-5 h-5 text-white\">\n                                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                                        </svg>\n                                    ) : \"\"\n                                }\n                            </div>\n                            <hr className={`h-12 border md:w-full md:h-auto ${idx + 1 == steps.stepsItems.length ? \"border-none\" : \"\" || steps.currentStep > idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n                        </div>\n                        <div className=\"h-8 flex justify-center items-center md:mt-3 md:h-auto\">\n                            <h3 className={`text-sm ${steps.currentStep == idx + 1 ? \"text-indigo-600\" : \"\"}`}>\n                                {item}\n                            </h3>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}","vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-2xl mx-auto px-4 md:px-0\">\n    <ul aria-label=\"Steps\" class=\"items-center text-gray-600 font-medium md:flex\">\n      <li v-for=\"(item, idx) in stepsItems\" :key=\"idx\" :aria-current=\"currentStep == idx + 1 ? 'step' : false\" class=\"flex gap-x-3 md:flex-col md:flex-1 md:gap-x-0\">\n        <div class=\"flex flex-col items-center md:flex-row md:flex-1\">\n          <hr :class=\"{'w-full border hidden md:block': true, 'border-none': idx == 0, 'border-indigo-600': currentStep >= idx + 1}\" />\n          <div :class=\"{'w-8 h-8 rounded-full border-2 flex-none flex items-center justify-center': true, 'bg-indigo-600 border-indigo-600': currentStep > idx + 1, 'border-indigo-600': currentStep == idx + 1}\">\n            <span :class=\"{'w-2.5 h-2.5 rounded-full bg-indigo-600': true, 'hidden': currentStep != idx + 1}\"></span>\n            <svg v-if=\"currentStep > idx + 1\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-white\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n            </svg>\n          </div>\n          <hr :class=\"{'h-12 border md:w-full md:h-auto': true, 'border-none': idx + 1 == stepsItems.length, 'border-indigo-600': currentStep > idx + 1}\" />\n        </div>\n        <div class=\"h-8 flex justify-center items-center md:mt-3 md:h-auto\">\n          <h3 :class=\"{'text-sm': true, 'text-indigo-600': currentStep == idx + 1}\">{{ item }}</h3>\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>\n","label":"App.vue"}],"vueCss":[]},"svelte":{"svelteTail":[{"code":"<script>\n    let stepsItems = [\"Profile\", \"Contact\", \"Identity\", \"Passport\"];\n    let currentStep = 2;\n</script>\n\n<div class=\"max-w-2xl mx-auto px-4 md:px-0\">\n    <ul aria-label=\"Steps\" class=\"items-center text-gray-600 font-medium md:flex\">\n        {#each stepsItems as item, idx}\n        <li aria-current={currentStep == idx + 1 ? 'step' : false} class=\"flex gap-x-3 md:flex-col md:flex-1 md:gap-x-0\">\n            <div class=\"flex flex-col items-center md:flex-row md:flex-1\">\n                <hr class={`w-full border hidden md:block ${idx == 0 ? 'border-none' : ''} ${currentStep >= idx + 1 ? 'border-indigo-600' : ''}`} />\n                <div class={`w-8 h-8 rounded-full border-2 flex-none flex items-center justify-center ${currentStep > idx + 1 ? 'bg-indigo-600 border-indigo-600' : ''} ${currentStep == idx + 1 ? 'border-indigo-600' : ''}`}>\n                    <span class={`w-2.5 h-2.5 rounded-full bg-indigo-600 ${currentStep != idx + 1 ? 'hidden' : ''}`}></span>\n                    {#if currentStep > idx + 1}\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-white\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                    </svg>\n                    {/if}\n                </div>\n                <hr class={`h-12 border md:w-full md:h-auto ${idx + 1 == stepsItems.length ? 'border-none' : ''} ${currentStep > idx + 1 ? 'border-indigo-600' : ''}`} />\n            </div>\n            <div class=\"h-8 flex justify-center items-center md:mt-3 md:h-auto\">\n                <h3 class={`text-sm ${currentStep == idx + 1 ? 'text-indigo-600' : ''}`}>{item}</h3>\n            </div>\n        </li>\n        {/each}\n    </ul>\n</div>","label":"App.svelte"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ steps: { stepsItems: ['Profile', 'Contact', 'Identity', 'Passport'], currentStep: 2 } }\" class=\"max-w-2xl mx-auto px-4 md:px-0\">\n    <ul aria-label=\"Steps\" class=\"items-center text-gray-600 font-medium md:flex\">\n        <template x-for=\"(item, idx) in steps.stepsItems\" :key=\"idx\">\n            <li :aria-current=\"steps.currentStep == idx + 1 ? 'step' : false\" class=\"flex gap-x-3 md:flex-col md:flex-1 md:gap-x-0\">\n                <div class=\"flex flex-col items-center md:flex-row md:flex-1\">\n                    <hr :class=\"{'w-full border hidden md:block': true, 'border-none': idx == 0, 'border-indigo-600': steps.currentStep >= idx + 1}\" />\n                    <div :class=\"{'w-8 h-8 rounded-full border-2 flex-none flex items-center justify-center': true, 'bg-indigo-600 border-indigo-600': steps.currentStep > idx + 1, 'border-indigo-600': steps.currentStep == idx + 1}\">\n                        <span :class=\"{'w-2.5 h-2.5 rounded-full bg-indigo-600': true, 'hidden': steps.currentStep != idx + 1}\"></span>\n                        <template x-if=\"steps.currentStep > idx + 1\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-white\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                            </svg>\n                        </template>\n                    </div>\n                    <hr :class=\"{'h-12 border md:w-full md:h-auto': true, 'border-none': idx + 1 == steps.stepsItems.length, 'border-indigo-600': steps.currentStep > idx + 1}\" />\n                </div>\n                <div class=\"h-8 flex justify-center items-center md:mt-3 md:h-auto\">\n                    <h3 :class=\"{'text-sm': true, 'text-indigo-600': steps.currentStep == idx + 1}\" x-text=\"item\"></h3>\n                </div>\n            </li>\n        </template>\n    </ul>\n</div>"}]}}
slug: /steps
id: d376841e-4333-4aff-a88a-a9dfb5212762
created_at: 1669575403207
---

<FUIStepsWithTitlesOnTheBottom />