---
title: Basic Steps
category: Application
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"code":"<div x-data=\"{ stepsCount: [1, 2, 3, 4], currentStep: 2 }\" class=\"max-w-lg mx-auto px-4 sm:px-0\">\n    <ul aria-label=\"Steps\" class=\"flex items-center\">\n        <template x-for=\"(item, idx) in stepsCount\" :key=\"idx\">\n            <li :aria-current=\"currentStep == idx + 1 ? 'step' : false\" class=\"flex-1 last:flex-none flex items-center\">\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                    <template x-if=\"currentStep > idx + 1\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-white\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                        </svg>\n                    </template>\n                </div>\n                <hr :class=\"{'w-full border': true, 'hidden': idx + 1 == stepsCount.length, 'border-indigo-600': currentStep > idx + 1}\" />\n            </li>\n        </template>\n    </ul>\n</div>","label":"index.html"}]},"svelte":{"svelteTail":[{"code":"<script>\n    let stepsCount = [1, 2, 3, 4];\n    let currentStep = 2;\n</script>\n\n<div class=\"max-w-lg mx-auto px-4 sm:px-0\">\n    <ul aria-label=\"Steps\" class=\"flex items-center\">\n        {#each stepsCount as item, idx (item)}\n            <li aria-current={currentStep == idx + 1 ? 'step' : undefined} class=\"flex-1 last:flex-none flex items-center\">\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\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-white\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                        </svg>\n                    {/if}\n                </div>\n                <hr class={`w-full border ${idx + 1 == stepsCount.length ? \"hidden\" : \"\"} ${currentStep > idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n            </li>\n        {/each}\n    </ul>\n</div>","label":"App.svelte"}]},"vue":{"vueCss":[],"vueTail":[{"label":"App.vue","code":"<template>\n    <div class=\"max-w-lg mx-auto px-4 sm:px-0\">\n        <ul aria-label=\"Steps\" class=\"flex items-center\">\n            <li v-for=\"(item, idx) in stepsCount\" :key=\"idx\" :aria-current=\"currentStep == idx + 1 ? 'step' : false\" class=\"flex-1 last:flex-none flex items-center\">\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                    <template v-if=\"currentStep > idx + 1\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5 text-white\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\n                        </svg>\n                    </template>\n                </div>\n                <hr :class=\"{'w-full border': true, 'hidden': idx + 1 == stepsCount.length, 'border-indigo-600': currentStep > idx + 1}\" />\n            </li>\n        </ul>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            stepsCount: [1, 2, 3, 4],\n            currentStep: 2\n        }\n    }\n}\n</script>\n"}]},"preview":"function App() {\n\n    const [steps, setStep] = useState({\n        stpesCount: [1, 2, 3, 4],\n        currentStep: 2\n    })\n\n    return (\n        <div className=\"max-w-lg mx-auto px-4 pt-16 sm:px-0\">\n            <ul aria-label=\"Steps\" className=\"flex items-center\">\n                {steps.stpesCount.map((item, idx) => (\n                    <li aria-current={steps.currentStep == idx + 1 ? \"step\" : false} className=\"flex-1 last:flex-none flex items-center\">\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={`w-full border ${idx + 1 == steps.stpesCount.length ? \"hidden\" : \"\" || steps.currentStep > idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}","react":{"jsxCss":[],"jsxTail":[{"code":"import { useState } from \"react\"\n\nexport default () => {\n\n    const [steps, setStep] = useState({\n        stpesCount: [1, 2, 3, 4],\n        currentStep: 2\n    })\n\n    return (\n        <div className=\"max-w-lg mx-auto px-4 sm:px-0\">\n            <ul aria-label=\"Steps\" className=\"flex items-center\">\n                {steps.stpesCount.map((item, idx) => (\n                    <li aria-current={steps.currentStep == idx + 1 ? \"step\" : false} className=\"flex-1 last:flex-none flex items-center\">\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={`w-full border ${idx + 1 == steps.stpesCount.length ? \"hidden\" : \"\" || steps.currentStep > idx + 1 ? \"border-indigo-600\" : \"\"}`} />\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}","label":"App.jsx"}]}}
slug: /steps
id: 0ff86b2f-b38a-4d75-94b5-12ae72a1a7d4
created_at: 1669573682301
---

<FUIBasicSteps />