Skip to content
Portfolio Kit

Process Steps

How-I-work timeline of numbered steps with heading, description and duration, joined by a line. Stacks on mobile, runs in a row on large screens, and can mark a current step.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/process-steps
First time? Add the @portfolio-kit registry to components.json
components.json
{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

Project Tracker

Pass active to turn the steps into a status tracker: earlier steps are checked off and the current one is highlighted.

Split

A vertical timeline beside a pinned heading, for services pages where each step needs more room.

API Reference

Used in

Freelancer template