1 GitHub star = 1 new component.

Star the repo
Data Displaystepsdatavertical

Vertical Steps

Vertical step indicator with complete, current, and pending states.

CheckAccount Created
2Verify Email
3Setup Profile

Usage

Copy and paste this code into your React component:

tsx
import { StepperDataVertical } from 'react-component-kit-ui/data';

<StepperDataVertical>Content</StepperDataVertical>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/StepperDataVertical.tsx + StepperDataVertical.css:

StepperDataVertical.tsx
'use client';

import './StepperDataVertical.css';

/** StepperDataVertical โ€” ported from astro-component-kit. */
export interface StepperDataVerticalProps {
}

export function StepperDataVertical({}: StepperDataVerticalProps) {
  return (
    <>
      <div className="v-steps" data-rk-054ed8="">
        <div className="v-step done" data-rk-054ed8=""><span data-rk-054ed8="">Check</span>Account Created</div>
        <div className="v-step current" data-rk-054ed8=""><span data-rk-054ed8="">2</span>Verify Email</div>
        <div className="v-step" data-rk-054ed8=""><span data-rk-054ed8="">3</span>Setup Profile</div>
      </div>
    </>
  );
}

export default StepperDataVertical;
StepperDataVertical.css
/* StepperDataVertical โ€” ported from astro-component-kit (data/StepperDataVertical.astro) */

.v-steps:where([data-rk-054ed8]) { display: flex; flex-direction: column; gap: 1rem; }
.v-step:where([data-rk-054ed8]) { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; }
.v-step:where([data-rk-054ed8]) span:where([data-rk-054ed8]) { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; }
.current:where([data-rk-054ed8]) { color: #fff; }
.current:where([data-rk-054ed8]) span:where([data-rk-054ed8]) { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
.done:where([data-rk-054ed8]) span:where([data-rk-054ed8]) { background: #10b981; border-color: #10b981; color: #fff; }

Quick Info

Category
Data Display
Filename
StepperDataVertical.tsx
Dependencies
None โ€” pure React + CSS
Tags
stepsdatavertical