Components
Project Timeline
Q1
Research
Q2
Development
Q3
Launch
Installation
$ pnpm dlx shadcn@latest add @slidecn/timeline-slide
Usage
import TimelineSlide from "@/components/slides/timeline-slide";
function MyPresentation() {
return (
<Deck>
<TimelineSlide
title="Roadmap"
direction="vertical"
animated
steps={[
{ label: "Phase 1", description: "MVP release" },
{ label: "Phase 2", description: "Beta testing" },
{ label: "Phase 3", description: "Public launch" },
]}
/>
</Deck>
);
}API Reference
TimelineSlide
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Slide heading |
steps | TimelineStep[] | required | Timeline steps |
direction | "horizontal" | "vertical" | "horizontal" | Layout direction |
animated | boolean | false | Enable fragment animations |
notes | string | - | Speaker notes |
TimelineStep
| Field | Type | Description |
|---|---|---|
label | string | Step label |
description | string | Step description |