For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Timeline Slide

A timeline slide with horizontal or vertical direction and optional animations.

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

PropTypeDefaultDescription
titlestring-Slide heading
stepsTimelineStep[]requiredTimeline steps
direction"horizontal" | "vertical""horizontal"Layout direction
animatedbooleanfalseEnable fragment animations
notesstring-Speaker notes

TimelineStep

FieldTypeDescription
labelstringStep label
descriptionstringStep description