# Features Timeline Steps — Tailwind Feature Section

> A three-step "how it works" row joined by a wavy line that draws itself in view, popping each numbered node as it arrives.

- Category: [Feature Sections](https://pixelpapa.com/components/features.md)
- Tags: features, steps, timeline, path, how-it-works
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/features/features-timeline-steps

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/features-timeline-steps
```

The file is written to `components/pixelpapa/features-timeline-steps.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/features/features-timeline-steps.

## AI prompt

```text
Add the "Features Timeline Steps" component from PixelPapa UI to this project.

What it is: A three-step "how it works" row joined by a wavy line that draws itself in view, popping each numbered node as it arrives.
Category: Feature Sections. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/features-timeline-steps
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/features-timeline-steps.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/features-timeline-steps.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/features-timeline-steps" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More feature sections

- [Features Accordion Visual](https://pixelpapa.com/components/features/features-accordion-visual.md) (Pro): An accordion on the left steers a product mock on the right: a spring-driven focus frame glides to the matching region while the rest dims.
- [Features Alternating Rows](https://pixelpapa.com/components/features/features-alternating-rows.md) (Pro): Three text-and-illustration rows that swap sides; each drawing animates in on view and its floating layer drifts with scroll.
- [Features Animated Workflow](https://pixelpapa.com/components/features/features-animated-workflow.md) (Pro): A four-stage pipeline where an order token hops card to card with a shared-layout spring, leaving a completed result behind at every stage.
- [Features Big Numbered List](https://pixelpapa.com/components/features/features-big-numbered-list.md): An editorial list with oversized serif numerals that rise through a mask on view; the hovered or focused row opens its note and a marker bar slides to it.
- [Features Code And Result](https://pixelpapa.com/components/features/features-code-and-result.md) (Pro): A code snippet with clickable values beside a live preview: cycle a prop in the code and the toast on the right springs in with the new tone and position.
- [Features Comparison Table](https://pixelpapa.com/components/features/features-comparison-table.md): An us-versus-them table with a lifted highlight column; checks pop and draw their stroke row by row as the table scrolls in.