Data Display stepsdatavertical

Vertical Steps

Visual path for multi-step data processes or wizards.

CheckAccount Created
2Verify Email
3Setup Profile

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { VerticalSteps } from 'astro-component-kit';
---

<StepperDataVertical>Content</StepperDataVertical>
--- import { VerticalSteps } from 'astro-component-kit'; --- <StepperDataVertical>Content</StepperDataVertical>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/VerticalSteps.astro and paste the following code:

astro 
---
---
<div class="v-steps">
  <div class="v-step done"><span>Check</span>Account Created</div>
  <div class="v-step current"><span>2</span>Verify Email</div>
  <div class="v-step"><span>3</span>Setup Profile</div>
</div>
<style>
  .v-steps { display: flex; flex-direction: column; gap: 1rem; }
  .v-step { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; }
  .v-step span { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; }
  .current { color: #fff; }
  .current span { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
  .done span { background: #10b981; border-color: #10b981; color: #fff; }
</style>
--- --- <div class="v-steps"> <div class="v-step done"><span>Check</span>Account Created</div> <div class="v-step current"><span>2</span>Verify Email</div> <div class="v-step"><span>3</span>Setup Profile</div> </div> <style> .v-steps { display: flex; flex-direction: column; gap: 1rem; } .v-step { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; } .v-step span { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; } .current { color: #fff; } .current span { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); } .done span { background: #10b981; border-color: #10b981; color: #fff; } </style>

Quick Info

Category
Data Display
Filename
VerticalSteps.astro
Dependencies
None — pure Astro + CSS
Tags
stepsdatavertical