---
title: Steps with chevrons
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-2xl mx-auto px-4 py-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-1 last:flex-none flex md:items-center\">\n                        <div className=\"flex gap-x-3\">\n                            <div className=\"flex items-center flex-col gap-x-2\">\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={` ${steps.currentStep > idx + 1 ? \"hidden\" : \"\" || steps.currentStep == idx + 1 ? \"text-indigo-600\" : \"\"}`}>\n                                        {idx + 1}\n                                    </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                                <div className={`h-12 flex items-center md:hidden ${idx + 1 == steps.stepsItems.length ? \"hidden\" : \"\"}`}>\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-gray-500\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n                                    </svg>\n                                </div>\n                            </div>\n                            <div className=\"h-8 flex items-center md:h-auto\">\n                                <h3 className={`text-sm ${steps.currentStep == idx + 1 ? \"text-indigo-600\" : \"\"}`}>\n                                    {item}\n                                </h3>\n                            </div>\n                        </div>\n                        <div className={`flex-1 hidden md:block ${idx + 1 == steps.stepsItems.length ? \"md:hidden\" : \"\"}`}>\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 mx-auto text-gray-500\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n                            </svg>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}","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-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-1 last:flex-none flex md:items-center\">\n                        <div className=\"flex gap-x-3\">\n                            <div className=\"flex items-center flex-col gap-x-2\">\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={` ${steps.currentStep > idx + 1 ? \"hidden\" : \"\" || steps.currentStep == idx + 1 ? \"text-indigo-600\" : \"\"}`}>\n                                        {idx + 1}\n                                    </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                                <div className={`h-12 flex items-center md:hidden ${idx + 1 == steps.stepsItems.length ? \"hidden\" : \"\"}`}>\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-gray-500\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n                                    </svg>\n                                </div>\n                            </div>\n                            <div className=\"h-8 flex items-center md:h-auto\">\n                                <h3 className={`text-sm ${steps.currentStep == idx + 1 ? \"text-indigo-600\" : \"\"}`}>\n                                    {item}\n                                </h3>\n                            </div>\n                        </div>\n                        <div className={`flex-1 hidden md:block ${idx + 1 == steps.stepsItems.length ? \"md:hidden\" : \"\"}`}>\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 mx-auto text-gray-500\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n                            </svg>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}"}],"jsxCss":[]},"vue":{"vueCss":[],"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-1 last:flex-none flex md:items-center\">\n                <div class=\"flex gap-x-3\">\n                    <div class=\"flex items-center flex-col gap-x-2\">\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=\"{'hidden': currentStep > idx + 1, 'text-indigo-600': currentStep == idx + 1}\">\n                                {{ idx + 1 }}\n                            </span>\n                            <template v-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                            </template>\n                        </div>\n                        <div :class=\"{'h-12 flex items-center md:hidden': true, 'hidden': idx + 1 == stepsItems.length}\">\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-gray-500\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <div class=\"h-8 flex items-center md:h-auto\">\n                        <h3 :class=\"{'text-sm': true, 'text-indigo-600': currentStep == idx + 1}\">\n                            {{ item }}\n                        </h3>\n                    </div>\n                </div>\n                <div :class=\"{'flex-1 hidden md:block': true, 'md:hidden': idx + 1 == stepsItems.length}\">\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 mx-auto text-gray-500\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n                    </svg>\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"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ 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 stepsItems\" :key=\"idx\">\n            <li :aria-current=\"currentStep == idx + 1 ? 'step' : false\" class=\"flex-1 last:flex-none flex md:items-center\">\n                <div class=\"flex gap-x-3\">\n                    <div class=\"flex items-center flex-col gap-x-2\">\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=\"{'hidden': currentStep > idx + 1, 'text-indigo-600': currentStep == idx + 1}\">\n                                <template x-text=\"idx + 1\"></template>\n                            </span>\n                            <template x-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                            </template>\n                        </div>\n                        <div :class=\"{'h-12 flex items-center md:hidden': true, 'hidden': idx + 1 == stepsItems.length}\">\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-gray-500\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <div class=\"h-8 flex items-center md:h-auto\">\n                        <h3 :class=\"{'text-sm': true, 'text-indigo-600': currentStep == idx + 1}\" x-text=\"item\"></h3>\n                    </div>\n                </div>\n                <div :class=\"{'flex-1 hidden md:block': true, 'md:hidden': idx + 1 == stepsItems.length}\">\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 mx-auto text-gray-500\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n                    </svg>\n                </div>\n            </li>\n        </template>\n    </ul>\n</div>\n"}]},"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-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-1 last:flex-none flex md:items-center\">\n                <div class=\"flex gap-x-3\">\n                    <div class=\"flex items-center flex-col gap-x-2\">\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={`${currentStep > idx + 1 ? 'hidden' : ''} ${currentStep == idx + 1 ? 'text-indigo-600' : ''}`}>\n                                {idx + 1}\n                            </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                        <div class={`h-12 flex items-center md:hidden ${idx + 1 == stepsItems.length ? 'hidden' : ''}`}>\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-gray-500\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <div class=\"h-8 flex items-center md:h-auto\">\n                        <h3 class={`text-sm ${currentStep == idx + 1 ? 'text-indigo-600' : ''}`}>\n                            {item}\n                        </h3>\n                    </div>\n                </div>\n                <div class={`flex-1 hidden md:block ${idx + 1 == stepsItems.length ? 'md:hidden' : ''}`}>\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 mx-auto text-gray-500\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n                    </svg>\n                </div>\n            </li>\n        {/each}\n    </ul>\n</div>"}]}}
slug: /steps
id: c0e2d220-2eed-442a-8f4b-7b010f6574f6
created_at: 1669576101075
---

<FUIStepsWithChevrons />