Tailwind CSS Set Up Flows Blocks

Set Up Flows

Setup flow sections with list groups, sidebars, timelines, and button-driven steps for onboarding and first-run activation.

Setup Flow Card with Action List Pro

Compact setup card combines segmented progress, completion copy, and an action list for unfinished profile tasks.

<div class="p-4 h-full relative flex flex-col justify-between bg-card border border-card-line rounded-xl">
                      <div class="flex justify-between items-center gap-x-2">
                        <h2 class="font-semibold text-lg text-foreground">
                          Profile setup
                        </h2>
                        <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                      </div>

<div class="mt-3 w-40">
                        <p class="mb-1 text-sm text-foreground">2 of 4 completed</p>
                        <div class="grid grid-cols-4 gap-x-1.5">
                          <div class="bg-primary  h-2 flex-auto rounded-sm"></div>
                          <div class="bg-primary  h-2 flex-auto rounded-sm"></div>
                          <div class="bg-primary opacity-30 h-2 flex-auto rounded-sm"></div>
                          <div class="bg-primary opacity-30 h-2 flex-auto rounded-sm"></div>
                        </div>
                      </div>

<p class="mt-3 text-sm text-muted-foreground-1">
                        Your profile needs to be at least <span class="font-semibold text-foreground">50% complete</span> to be publicly visible.
                      </p>

<div class="mt-3 md:mt-5">
                        
                        <div class="space-y-1.5">
                          
                          <div class="py-2 px-2.5 flex justify-between items-center gap-x-3 bg-surface rounded-lg">
                            
                            <span class="size-5 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                            </span>

<div class="grow">
                              <div class="flex justify-between items-center gap-x-1.5">
                                <div class="grow">
                                  <s class="text-sm text-muted-foreground">
                                    Download desktop app
                                  </s>
                                </div>
                                <div>
                                  <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                    Download
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="py-2 px-2.5 flex justify-between items-center gap-x-3 bg-surface rounded-lg">
                            
                              <span class="size-5 flex shrink-0 justify-center items-center text-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
                              </span>

<div class="grow">
                              <div class="flex justify-between items-center gap-x-1.5">
                                <div class="grow">
                                  <span class="text-sm text-foreground">
                                    Provide company details
                                  </span>
                                </div>
                                <div>
                                  <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
                                    Add now
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="py-2 px-2.5 flex justify-between items-center gap-x-3 bg-surface rounded-lg">
                            
                            <span class="size-5 flex shrink-0 justify-center items-center bg-primary text-primary-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                            </span>

<div class="grow">
                              <div class="flex justify-between items-center gap-x-1.5">
                                <div class="grow">
                                  <s class="text-sm text-muted-foreground">
                                    Invite 5 talents
                                  </s>
                                </div>
                                <div>
                                  <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                    Invite
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="py-2 px-2.5 flex justify-between items-center gap-x-3 bg-surface rounded-lg">
                            
                              <span class="size-5 flex shrink-0 justify-center items-center text-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M8 10v4"/><path d="M12 10v2"/><path d="M16 10v6"/></svg>
                              </span>

<div class="grow">
                              <div class="flex justify-between items-center gap-x-1.5">
                                <div class="grow">
                                  <span class="text-sm text-foreground">
                                    Add projects
                                  </span>
                                </div>
                                <div>
                                  <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
                                    Add now
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>
                      
                    </div>

Open related work management template

Split setup card pairs a sticky progress sidebar with accordion sections for integrations, project tracking, and collaborator invites.

<div class="bg-layer border border-layer-line shadow-xs rounded-xl">
                      <div class="grid grid-cols-1 md:grid-cols-12">
                        <div class="md:col-span-4 flex-1 flex flex-col h-full">
                          <div class="md:sticky md:top-0 p-5 md:pt-6.5">
                            
                            <div>
                              <p class="mb-4 font-medium text-sm text-foreground">
                                2 of 3 completed
                              </p>

<div class="group relative flex gap-x-3.5">
                                
                                <div class="relative group-last:after:hidden after:absolute after:top-6 after:bottom-1 after:inset-s-2.5 after:-translate-x-[0.5px] after:border-s after:border-line-2">
                                  <span class="size-5 flex justify-center items-center bg-green-500 text-foreground-inverse rounded-full">
                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                                    <svg class="hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m8 17 4 4 4-4"/></svg>
                                  </span>
                                </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                                  <span class="text-sm text-foreground">
                                    Connect to your apps
                                  </span>
                                </div>
                                
                              </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                                  <span class="text-sm text-foreground">
                                    Track your first projects
                                  </span>
                                </div>
                                
                              </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                                  <span class="text-sm text-foreground">
                                    Invite collaborators
                                  </span>
                                </div>
                                
                              </div>
                              
                            </div>
                            
                          </div>
      
                          
                          <div class="mt-auto hidden md:block p-5">
                            <div class="pt-5 border-t border-line-2">
                              <span class="mb-2 flex shrink-0 justify-center items-center size-7 rounded-full bg-surface text-muted-foreground">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                              </span>
                              <p class="text-[13px] italic text-muted-foreground-1">
                                You can update or add details anytime from your settings.
                              </p>
                            </div>
                          </div>
                          
                        </div>

<div class="md:col-span-8 md:border-s border-line-2">
                          
                          <div class="hs-accordion-group space-y-2 p-1.5 md:p-3">
                            
                            <div class="hs-accordion flex flex-col active" id="hs-pro-psuf-sg-hd-one-ayfp-hd">
                              
                              <button class="hs-accordion-toggle p-3.5 w-full inline-flex justify-between items-center gap-x-3 text-start text-sm bg-surface font-medium text-surface-foreground rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="true" aria-controls="hs-pro-psuf-sg-one-ayfp">
                                Connect to your apps
            
                                <svg class="hs-accordion-active:hidden block size-4.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
                                <svg class="hs-accordion-active:block hidden size-4.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>
                              </button>

<div id="hs-pro-psuf-sg-one-ayfp" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-psuf-sg-hd-one-ayfp-hd">
                                <div class="p-3.5 sm:pb-8">
                                  <p class="text-sm text-muted-foreground-1">
                                    Sync your data to get powerful insights, Al-generated segments, and behavior-based automations.
                                  </p>

<div class="mt-5 flex flex-col divide-y divide-dashed divide-line-2">
                                    <div class="divide-y divide-dashed divide-line-2">
                                      
                                      <div class="py-3 flex flex-col">
                                        <div class="flex justify-between items-center gap-3">
                                          <svg class="shrink-0 size-5 text-muted-foreground-1" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333V8.53333Z" fill="#36C5F0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654V23.4654Z" fill="#ECB22E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.53081 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"/></svg>

<div class="grow">
                                            <p class="text-sm text-foreground">
                                              Slack
                                            </p>
                                          </div>

<span class="relative z-10 size-7 flex shrink-0 justify-center items-center bg-surface text-surface-foreground rounded-full peer-checked:hidden peer-checked:bg-secondary peer-checked:text-secondary-foreground">
                                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
                                                <span class="sr-only">Connect</span>
                                              </span>

<span class="relative z-10 size-7 hidden shrink-0 justify-center items-center bg-surface text-surface-foreground rounded-full peer-checked:flex peer-checked:bg-secondary peer-checked:text-secondary-foreground">
                                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                                <span class="sr-only">Connected</span>
                                              </span>
                                            </label>
                                          </div>
                                        </div>
                                      </div>

<div class="grow">
                                            <p class="text-sm text-foreground">
                                              Notion
                                            </p>
                                          </div>

<div class="py-3 flex flex-col">
                                        <div class="flex justify-between items-center gap-3">
                                          <svg class="shrink-0 size-5 text-muted-foreground-1" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122209asdasd)"><path d="M3.11931 28.4817H8.21019V16.1181L0.937439 10.6636V26.3C0.937439 27.5054 1.91381 28.4819 3.11931 28.4819V28.4817Z" fill="#4285F4"/><path d="M25.6647 28.4817H30.7556C31.961 28.4817 32.9374 27.5054 32.9374 26.2999V10.6636L25.6647 16.1181V28.4817Z" fill="#34A853"/><path d="M25.6647 6.66356V16.1181L32.9374 10.6636V7.7545C32.9374 5.05812 29.8593 3.51812 27.701 5.13631L25.6647 6.66356Z" fill="#FBBC04"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.21021 16.1181V6.66356L16.9375 13.2091L25.6647 6.66356V16.1181L16.9375 22.6636L8.21021 16.1181Z" fill="#EA4335"/><path d="M0.937439 7.7545V10.6636L8.21019 16.1181V6.66356L6.17381 5.13631C4.01556 3.51813 0.937439 5.05813 0.937439 7.75438V7.7545Z" fill="#C5221F"/></g><defs><clipPath id="clip0_11766_122209asdasd"><rect width="32" height="32" fill="white" transform="translate(0.937439)"/></clipPath></defs></svg>

<div class="grow">
                                            <p class="text-sm text-foreground">
                                              Gmail
                                            </p>
                                          </div>

<div class="grow">
                                            <p class="text-sm text-foreground">
                                              Dropbox
                                            </p>
                                          </div>

<div class="py-3 flex flex-col">
                                        <div class="flex justify-between items-center gap-3">
                                          <svg class="shrink-0 size-5 text-muted-foreground-1" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_11766_122079)"><path d="M16 32C7.16 32 0 24.84 0 16C0 7.16 7.16 0 16 0C24.84 0 32 7.16 32 16C32 24.84 24.84 32 16 32Z" fill="#FFE01B"/><path d="M11.72 19.28C11.74 19.3 11.74 19.34 11.72 19.38C11.64 19.52 11.48 19.6 11.32 19.58C11.02 19.54 10.8 19.3 10.82 19C10.82 18.8 10.86 18.62 10.92 18.42C11.02 18.18 10.92 17.92 10.72 17.78C10.6 17.7 10.44 17.68 10.3 17.7C10.16 17.72 10.04 17.82 9.96001 17.94C9.90001 18.04 9.86001 18.14 9.84001 18.24C9.84001 18.26 9.82001 18.28 9.82001 18.28C9.78001 18.4 9.70001 18.44 9.64001 18.44C9.62001 18.44 9.58001 18.42 9.56001 18.36C9.50001 18.02 9.62001 17.68 9.84001 17.42C10.04 17.2 10.32 17.1 10.62 17.14C10.92 17.18 11.2 17.38 11.32 17.66C11.46 18 11.42 18.38 11.24 18.7C11.22 18.72 11.22 18.76 11.2 18.78C11.14 18.9 11.12 19.06 11.2 19.18C11.26 19.26 11.34 19.3 11.44 19.3C11.48 19.3 11.52 19.3 11.56 19.28C11.64 19.24 11.7 19.24 11.72 19.28ZM24.94 19.6C24.92 20.22 24.78 20.82 24.56 21.4C23.44 24.1 20.76 25.6 17.56 25.5C14.58 25.42 12.04 23.84 10.94 21.26C10.24 21.24 9.56001 20.96 9.06001 20.5C8.52001 20.04 8.18001 19.4 8.10001 18.7C8.04001 18.22 8.10001 17.74 8.28001 17.28L7.66001 16.76C4.78001 14.36 13.72 4.4 16.56 6.9C16.58 6.92 17.54 7.86 17.54 7.86C17.54 7.86 18.06 7.64 18.08 7.64C20.58 6.6 22.62 7.1 22.62 8.76C22.62 9.62 22.08 10.62 21.2 11.54C21.56 11.9 21.8 12.34 21.92 12.82C22.02 13.16 22.06 13.5 22.08 13.86C22.1 14.22 22.12 15.04 22.12 15.04C22.14 15.04 22.4 15.12 22.48 15.14C23 15.26 23.46 15.48 23.86 15.82C24.08 16.02 24.2 16.3 24.26 16.58C24.32 16.96 24.22 17.34 24 17.64C24.06 17.78 24.1 17.9 24.16 18.04C24.24 18.28 24.28 18.48 24.3 18.5C24.52 18.54 24.94 18.86 24.94 19.6ZM12.34 18.12C12.14 16.86 11.3 16.42 10.72 16.38C10.58 16.38 10.44 16.38 10.28 16.42C9.26001 16.62 8.66001 17.5 8.78001 18.64C8.96001 19.7 9.82001 20.5 10.88 20.56C10.98 20.56 11.08 20.56 11.18 20.54C12.24 20.38 12.5 19.24 12.34 18.12ZM14.1 10.12C14.98 9.4 15.9 8.76 16.88 8.2C16.88 8.2 16.1 7.3 15.86 7.22C14.42 6.82 11.3 8.98 9.30001 11.84C8.50001 13 7.34001 15.04 7.90001 16.08C8.10001 16.32 8.32001 16.52 8.56001 16.72C8.92001 16.2 9.48001 15.84 10.12 15.72C10.9 13.54 12.28 11.6 14.1 10.12ZM17.22 20.1C17.3 20.44 17.56 20.72 17.9 20.8C18.08 20.86 18.24 20.92 18.44 20.94C20.72 21.34 22.86 20.02 23.34 19.7C23.38 19.68 23.4 19.7 23.38 19.74C23.36 19.76 23.34 19.78 23.34 19.8C22.76 20.56 21.18 21.44 19.12 21.44C18.22 21.44 17.32 21.12 17 20.64C16.48 19.88 16.98 18.78 17.82 18.9C17.82 18.9 18.12 18.94 18.2 18.94C19.52 19.06 20.86 18.86 22.08 18.32C23.24 17.78 23.68 17.18 23.62 16.7C23.6 16.56 23.52 16.42 23.42 16.3C23.1 16.04 22.72 15.86 22.32 15.78C22.14 15.72 22.02 15.7 21.88 15.66C21.64 15.58 21.52 15.52 21.5 15.06C21.48 14.86 21.46 14.18 21.44 13.88C21.42 13.38 21.36 12.7 20.94 12.42C20.84 12.34 20.7 12.3 20.58 12.3C20.5 12.3 20.44 12.3 20.36 12.32C20.14 12.36 19.96 12.48 19.8 12.64C19.4 13 18.88 13.18 18.34 13.14C18.04 13.12 17.74 13.08 17.38 13.06C17.32 13.06 17.24 13.06 17.18 13.04C16.22 13.06 15.44 13.78 15.32 14.74C15.12 16.16 16.14 16.88 16.44 17.32C16.48 17.38 16.52 17.44 16.52 17.52C16.52 17.6 16.48 17.68 16.42 17.72C15.6 18.64 15.3 19.92 15.62 21.12C15.66 21.26 15.7 21.4 15.76 21.54C16.5 23.28 18.82 24.1 21.08 23.36C21.38 23.26 21.66 23.14 21.94 23C22.44 22.76 22.88 22.42 23.26 22.02C23.84 21.44 24.22 20.68 24.36 19.86C24.42 19.4 24.32 19.24 24.2 19.16C24.1 19.1 24 19.08 23.88 19.1C23.82 18.74 23.72 18.4 23.58 18.08C22.94 18.56 22.2 18.94 21.42 19.16C20.48 19.42 19.52 19.52 18.54 19.48C17.92 19.42 17.5 19.24 17.34 19.76C18.28 20.08 19.28 20.18 20.28 20.06C20.3 20.06 20.34 20.08 20.34 20.1C20.34 20.12 20.32 20.14 20.3 20.16C20.22 20.14 19.06 20.68 17.22 20.1ZM13.84 11.88C14.6 11.34 15.48 10.96 16.38 10.76C17.42 10.52 18.48 10.52 19.52 10.76C19.56 10.76 19.58 10.7 19.54 10.68C19 10.4 18.42 10.24 17.8 10.22C17.78 10.22 17.76 10.2 17.76 10.18V10.16C17.86 10.04 17.96 9.92 18.08 9.84C18.1 9.82 18.1 9.8 18.08 9.8L18.06 9.78C17.32 9.86 16.62 10.1 15.98 10.52C15.96 10.52 15.94 10.52 15.94 10.52V10.5C15.98 10.32 16.06 10.14 16.16 9.96C16.16 9.94 16.16 9.92 16.14 9.92H16.12C15.22 10.42 14.42 11.08 13.76 11.86C13.74 11.88 13.74 11.9 13.76 11.9C13.8 11.9 13.82 11.9 13.84 11.88ZM19.84 16.7C19.96 16.78 20.14 16.76 20.24 16.64C20.3 16.52 20.22 16.38 20.06 16.3C19.94 16.22 19.76 16.24 19.66 16.36C19.6 16.46 19.68 16.62 19.84 16.7ZM20.34 14.88C20.38 15.08 20.46 15.28 20.58 15.44C20.7 15.42 20.84 15.42 20.96 15.44C21.04 15.22 21.04 14.98 20.98 14.76C20.88 14.34 20.76 14.1 20.52 14.14C20.26 14.18 20.24 14.48 20.34 14.88ZM20.88 15.84C20.72 15.8 20.54 15.88 20.48 16.06C20.44 16.22 20.52 16.4 20.7 16.46C20.88 16.52 21.04 16.42 21.1 16.24C21.1 16.22 21.12 16.18 21.12 16.16C21.12 16 21.02 15.86 20.88 15.84Z" fill="black"/><path d="M16.66 15.8C16.62 15.8 16.6 15.78 16.6 15.76C16.58 15.68 16.7 15.58 16.8 15.48C17.14 15.22 17.6 15.18 17.98 15.34C18.16 15.42 18.32 15.54 18.42 15.7C18.46 15.76 18.46 15.82 18.44 15.84C18.4 15.88 18.3 15.84 18.12 15.76C17.92 15.66 17.68 15.6 17.46 15.62C17.2 15.66 16.92 15.72 16.66 15.8ZM18.38 16.16C18.22 16 18 15.92 17.8 15.96C17.64 15.98 17.5 16.04 17.38 16.14C17.32 16.18 17.28 16.24 17.28 16.32C17.28 16.34 17.28 16.36 17.3 16.36C17.32 16.36 17.32 16.38 17.34 16.38C17.4 16.38 17.46 16.36 17.5 16.34C17.74 16.26 17.98 16.22 18.22 16.26C18.34 16.28 18.38 16.28 18.42 16.24C18.4 16.2 18.4 16.18 18.38 16.16Z" fill="black"/></g><defs><clipPath id="clip0_11766_122079"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>

<div class="grow">
                                            <p class="text-sm text-foreground">
                                              Mailchimp
                                            </p>
                                          </div>

<div class="mt-3">
                                    <a class="text-sm text-primary hover:decoration-2 underline underline-offset-4 focus:outline-hidden focus:decoration-2" href="#">
                                      Discover more
                                    </a>
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>

<div class="hs-accordion flex flex-col active" id="hs-pro-psuf-sg-hd-one-atm-hd">
                              
                              <button class="hs-accordion-toggle p-3.5 w-full inline-flex justify-between items-center gap-x-3 text-start text-sm bg-surface font-medium text-surface-foreground rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="true" aria-controls="hs-pro-psuf-sg-one-atm">
                                Track your first projects
            
                                <svg class="hs-accordion-active:hidden block size-4.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
                                <svg class="hs-accordion-active:block hidden size-4.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>
                              </button>

<div id="hs-pro-psuf-sg-one-atm" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-psuf-sg-hd-one-atm-hd">
                                <div class="p-3.5 sm:pb-8">
                                  <p class="text-sm text-muted-foreground-1">
                                    Monitor progress and keep your early projects on track using essential tools and metrics.
                                  </p>

<div class="mt-5 flex flex-col">
                                    
                                    <div class="py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                      <div class="flex items-center gap-3">
                                        <div class="text-foreground">
                                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
                                        </div>

<div class="grow">
                                          <p class="text-sm text-foreground">
                                            Add your first project
                                          </p>
                                        </div>

<div class="py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                      <div class="flex items-center gap-3">
                                        <div class="text-foreground">
                                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2"/><path d="M3 11h3c.8 0 1.6.3 2.1.9l1.1.9c1.6 1.6 4.1 1.6 5.7 0l1.1-.9c.5-.5 1.3-.9 2.1-.9H21"/></svg>
                                        </div>

<div class="grow">
                                          <p class="text-sm text-foreground">
                                            Set a project budget
                                          </p>
                                        </div>

<div class="py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                      <div class="flex items-center gap-3">
                                        <div class="text-foreground">
                                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                        </div>

<div class="grow">
                                          <p class="text-sm text-foreground">
                                            Assign team members
                                          </p>
                                        </div>

<div class="py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                      <div class="flex items-center gap-3">
                                        <div class="text-foreground">
                                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                        </div>

<div class="grow">
                                          <p class="text-sm text-foreground">
                                            Log hours spent
                                          </p>
                                        </div>

<div class="py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                      <div class="flex items-center gap-3">
                                        <div class="text-foreground">
                                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
                                        </div>

<div class="grow">
                                          <p class="text-sm text-foreground">
                                            Monitor project status
                                          </p>
                                        </div>

<div>
                                          <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:bg-surface disabled:text-muted-foreground disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus" >
                                            Start
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>

<div class="hs-accordion flex flex-col active" id="hs-pro-psuf-sg-hd-one-mps-hd">
                              
                              <button class="hs-accordion-toggle p-3.5 w-full inline-flex justify-between items-center gap-x-3 text-start text-sm bg-surface font-medium text-surface-foreground rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="true" aria-controls="hs-pro-psuf-sg-one-mps">
                                Invite collaborators
            
                                <svg class="hs-accordion-active:hidden block size-4.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
                                <svg class="hs-accordion-active:block hidden size-4.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>
                              </button>

<div id="hs-pro-psuf-sg-one-mps" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-psuf-sg-hd-one-mps-hd">
                                <div class="p-3.5 sm:pb-8">
                                  <p class="text-sm text-muted-foreground-1">
                                    Send invitations to colleagues, clients, or partners so they can start contributing right away.
                                  </p>

<div class="mt-5 flex flex-col gap-y-7">
                                    <div>
                                      <span class="mb-2 block font-medium text-sm text-foreground">
                                        Invite
                                      </span>

<div class="flex flex-col flex-row gap-3">
                                        <input type="email" class="block py-2.5 px-3 w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Add name or emails">
                                        <button type="button" class="py-2.5 px-3 inline-flex items-center gap-x-2 sm:text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                                          Send
                                        </button>
                                      </div>
                                      
                                    </div>

<div>
                                      <span class="mb-2 block font-medium text-sm text-foreground">
                                        Pending team invitations
                                      </span>

<div class="flex flex-col">
                                        
                                        <div class="flex justify-between gap-3 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                          <img class="shrink-0 mx-auto size-6 rounded-full" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">

<div class="grow">
                                            <span class="block text-sm text-foreground">
                                              Cho Muncho
                                            </span>
                                            <small class="block text-xs text-muted-foreground-1">
                                              chomuncho@site.com
                                            </small>
                                          </div>

<div class="flex justify-center items-center gap-x-1 whitespace-nowrap">
                                            <svg class="shrink-0 size-3.5 text-green-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                            <small class="block text-xs text-muted-foreground-1">
                                              Accpeted
                                            </small>
                                          </div>
                                        </div>

<div class="flex justify-between gap-3 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                          <img class="shrink-0 mx-auto size-6 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=160&h=160&q=80" alt="Avatar">

<div class="grow">
                                            <span class="block text-sm text-foreground">
                                              Daniel Hobbs
                                            </span>
                                            <small class="block text-xs text-muted-foreground-1">
                                              dhobbs@site.com
                                            </small>
                                          </div>

<div class="flex justify-between gap-3 py-2.5 first:pt-0 last:pb-0 first:border-t-0 border-t border-dashed border-line-2">
                                          <span class="flex shrink-0 justify-center items-center size-6 bg-surface-1 text-muted-foreground-1 text-[11px] font-semibold rounded-full">L</span>

<div class="grow">
                                            <span class="block text-sm text-foreground">
                                              Liza Harrison
                                            </span>
                                            <small class="block text-xs text-muted-foreground-1">
                                              liza@site.com
                                            </small>
                                          </div>

<div class="flex justify-center items-center gap-x-1 whitespace-nowrap">
                                            <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg>
                                            <small class="block text-xs text-muted-foreground-1">
                                              Requested
                                            </small>
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>

Open related project setup template

Setup Flow Timeline Card Pro

Compact setup card stacks milestone rows with status icons, inline actions, and a vertical progress line.

<div class="p-4 h-full relative flex flex-col bg-card border border-card-line rounded-xl">
                      <div class="flex justify-between items-center gap-x-2">
                        <h2 class="font-semibold text-foreground">
                          Profile setup
                        </h2>
                        <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-semibold uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                      </div>

<p class="mt-4 text-sm text-muted-foreground-2">
                        Your profile needs to be at least <span class="font-semibold text-foreground">50% complete</span> to be publicly visible.
                      </p>

<div class="mt-4">
                        <p class="mb-4 font-medium text-sm text-foreground">3 of 5 completed</p>
    
                        
                        <div class="group relative flex gap-x-3.5">
                          
                          <div class="relative group-last:after:hidden after:absolute after:top-6 after:bottom-1 after:inset-s-2.5 after:-translate-x-[0.5px] after:borders- after:border-line-2">
                            <span class="size-5 flex justify-center items-center bg-primary text-primary-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                              <svg class="hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m8 17 4 4 4-4"/></svg>
                            </span>
                          </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                            <div class="flex justify-between items-center gap-x-1.5">
                              <div class="inline-flex flex-wrap gap-x-3 text-sm text-foreground">
                                <s class="text-muted-foreground">
                                  Download desktop app
                                </s>
                              </div>
                              <div>
                                <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                  Download
                                </button>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div class="group relative flex gap-x-3.5">
                          
                          <div class="relative group-last:after:hidden after:absolute after:top-6 after:bottom-1 after:inset-s-2.5 after:-translate-x-[0.5px] after:borders- after:border-line-2">
                            <span class="size-5 flex justify-center items-center bg-primary text-primary-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                              <svg class="hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M8 10v4"/><path d="M12 10v2"/><path d="M16 10v6"/></svg>
                            </span>
                          </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                            <div class="flex justify-between items-center gap-x-1.5">
                              <div class="inline-flex flex-wrap gap-x-3 text-sm text-foreground">
                                <s class="text-muted-foreground">
                                  Add projects
                                </s>
                              </div>
                              <div>
                                <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                  Add now
                                </button>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div class="group relative flex gap-x-3.5">
                          
                          <div class="relative group-last:after:hidden after:absolute after:top-6 after:bottom-1 after:inset-s-2.5 after:-translate-x-[0.5px] after:borders- after:border-line-2">
                            <span class="size-5 flex justify-center items-center bg-primary text-primary-foreground rounded-full">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                              <svg class="hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                            </span>
                          </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                            <div class="flex justify-between items-center gap-x-1.5">
                              <div class="inline-flex flex-wrap gap-x-3 text-sm text-foreground">
                                <s class="text-muted-foreground">
                                  Invite 5 talents
                                </s>
                              </div>
                              <div>
                                <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                  Invite
                                </button>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div class="group relative flex gap-x-3.5">
                          
                          <div class="relative group-last:after:hidden after:absolute after:top-6 after:bottom-1 after:inset-s-2.5 after:-translate-x-[0.5px] after:borders- after:border-line-2">
                            <span class="size-5 flex justify-center items-center text-foreground">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
                            </span>
                          </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                            <div class="flex justify-between items-center gap-x-1.5">
                              <div class="inline-flex flex-wrap gap-x-3 text-sm text-foreground">
                                Provide company details
                              </div>
                              <div>
                                <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                  Add now
                                </button>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div class="group relative flex gap-x-3.5">
                          
                          <div class="relative group-last:after:hidden after:absolute after:top-6 after:bottom-1 after:inset-s-2.5 after:-translate-x-[0.5px] after:borders- after:border-line-2">
                            <span class="size-5 flex justify-center items-center text-foreground">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>
                            </span>
                          </div>

<div class="-mt-1 grow pb-5 group-last:pb-0">
                            <div class="flex justify-between items-center gap-x-1.5">
                              <div class="inline-flex flex-wrap gap-x-3 text-sm text-foreground">
                                Set up a payment method
                              </div>
                              <div>
                                <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                  Set up
                                </button>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>
                      
                    </div>

Setup Flow List with Action Buttons Pro

Numbered setup list pairs each step with a trailing action button and completed-state styling for finished items.

<div>
  
  <div class="p-2 flex justify-between items-center gap-x-1.5">
    <div class="inline-flex flex-wrap gap-1.5 text-xs text-foreground">
      <span class="size-4.5 flex justify-center items-center bg-surface-1 text-surface-foreground rounded-full">
        <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        <span class="sr-only text-[11px] ">1</span>
      </span>
      <s class="leading-5 text-muted-foreground">
        Desktop app
      </s>
    </div>
    <div>
      <button type="button" class="py-1 px-1.5 inline-flex items-center gap-x-1 text-[11px] rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
        Download
      </button>
    </div>
  </div>

<div class="p-2 flex justify-between items-center gap-x-1.5">
    <div class="inline-flex flex-wrap gap-1.5 text-xs text-foreground">
      <span class="size-4.5 flex justify-center items-center border border-dashed border-line-3 text-muted-foreground-1 rounded-full">
        <span class="text-[11px] ">2</span>
      </span>
      
      <span class="leading-5">
        Event notifications
      </span>
    </div>
    <div>
      <button type="button" class="py-1 px-1.5 inline-flex items-center gap-x-1 text-[11px] rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
        Enable
      </button>
    </div>
  </div>

<div class="p-2 flex justify-between items-center gap-x-1.5">
    <div class="inline-flex flex-wrap gap-1.5 text-xs text-foreground">
      <span class="size-4.5 flex justify-center items-center bg-surface-1 text-surface-foreground rounded-full">
        <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        <span class="sr-only text-[11px] ">3</span>
      </span>
      <s class="leading-5 text-muted-foreground">
        Calendar accounts
      </s>
    </div>
    <div>
      <button type="button" class="py-1 px-1.5 inline-flex items-center gap-x-1 text-[11px] rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
        Connect
      </button>
    </div>
  </div>

<div class="p-2 flex justify-between items-center gap-x-1.5">
    <div class="inline-flex flex-wrap gap-1.5 text-xs text-foreground">
      <span class="size-4.5 flex justify-center items-center border border-dashed border-line-3 text-muted-foreground-1 rounded-full">
        <span class="text-[11px] ">4</span>
      </span>
      
      <span class="leading-5">
        Preline workspace
      </span>
    </div>
    <div>
      <button type="button" class="py-1 px-1.5 inline-flex items-center gap-x-1 text-[11px] rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
        Connect
      </button>
    </div>
  </div>

<div class="p-2 flex justify-between items-center gap-x-1.5">
    <div class="inline-flex flex-wrap gap-1.5 text-xs text-foreground">
      <span class="size-4.5 flex justify-center items-center border border-dashed border-line-3 text-muted-foreground-1 rounded-full">
        <span class="text-[11px] ">5</span>
      </span>
      
      <span class="leading-5">
        Preline database
      </span>
    </div>
    <div>
      <button type="button" class="py-1 px-1.5 inline-flex items-center gap-x-1 text-[11px] rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" >
        Show
      </button>
    </div>
  </div>
  
</div>

Open related calendar week template

Set Up Flows

Setup Flow Card with Action List Pro

Setup Flow Layout with Sidebar and Accordion Pro

Setup Flow Timeline Card Pro

Setup Flow List with Action Buttons Pro