saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Step Timeline

Step Timeline

An animated step-by-step timeline that shows progress through a multi-step process.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/step-timeline.json

Usage

import { StepTimeline } from "@/components/ui/step-timeline"
const steps = [
  {
    id: "1",
    title: "Planning",
    description: "Define scope and requirements",
    status: "completed",
  },
  {
    id: "2",
    title: "Development",
    description: "Build the feature",
    status: "in-progress",
  },
  {
    id: "3",
    title: "Review",
    status: "pending",
  },
]

<StepTimeline steps={steps} />

API Reference

StepTimeline

PropTypeDefaultDescription
stepsStep[]—Array of step objects.
classNamestring—Additional CSS classes.

Step

interface Step {
  id: string
  title: string
  description?: string
  status: "completed" | "in-progress" | "pending"
  icon?: LucideIcon
  details?: string
}
PreviousSpotlightNextSwitch

On This Page

  • Installation
  • Usage
  • API Reference
  • StepTimeline
  • Step
Upload files

3 files uploaded

Processing

Analyzing documents...

Review

Waiting for processing