Progress Checklist

A checklist component with progress tracking for onboarding tasks and setup flows.

Preview

Features

Card-style task items with checkbox, title, and description
Progress bar with completion count
Visual feedback for completed tasks (line-through, muted text)
Optional navigation links with chevron indicator
Callback handlers for status changes and item clicks
Fully accessible with proper ARIA attributes

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
progress-checklist.tsx	components/onboarding/progress-checklist/progress-checklist.tsx
checklist-item.tsx	components/onboarding/progress-checklist/checklist-item.tsx
checklist-progress.tsx	components/onboarding/progress-checklist/checklist-progress.tsx
types.ts	components/onboarding/progress-checklist/types.ts
index.ts	components/onboarding/progress-checklist/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add checkbox progress

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. progress-checklist.tsx

progress-checklist.tsx

tsx

"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChecklistItemCard } from "./checklist-item";
import { ChecklistProgress } from "./checklist-progress";

2. checklist-item.tsx

checklist-item.tsx

tsx

"use client";

import Link from "next/link";
import { Card } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";

3. checklist-progress.tsx

checklist-progress.tsx

tsx

"use client";

import { Progress } from "@/components/ui/progress";
import type { ChecklistProgressProps } from "./types";

4. types.ts

types.ts

tsx

export type ChecklistItemStatus = "pending" | "completed" | "skipped";

export interface ChecklistItem {
  id: string;
  title: string;

5. index.ts

index.ts

tsx

export { ProgressChecklist } from "./progress-checklist";
export { ChecklistItemCard } from "./checklist-item";
export { ChecklistProgress } from "./checklist-progress";
export type {
  ChecklistItem,
  ChecklistItemStatus,
  ProgressChecklistProps,
  ChecklistItemCardProps,
  ChecklistProgressProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/getting-started.tsx

tsx

import { useState } from "react";
import { ProgressChecklist } from "@/components/onboarding/progress-checklist";
import type { ChecklistItem, ChecklistItemStatus } from "@/components/onboarding/progress-checklist";

const initialItems: ChecklistItem[] = [

Props

Prop	Type	Default
title	string	-
description	string	-
items	ChecklistItem[]	required
onItemClick	(item: ChecklistItem) => void	-
onItemStatusChange	(id: string, status: ChecklistItemStatus) => void	-

ChecklistItem Interface

Property	Type	Description
id	string	Unique identifier
title	string	Task title
description	string	Optional task description
status	"pending" \| "completed" \| "skipped"	Current task status
href	string	Optional navigation link