Timeline

Timeline displays view-only vertical steps for instructions, changelogs, or process visualization. Items can have completed and active boolean fields to indicate progress, and a content snippet for custom rich content per step.

Quick Start

<script>
  import { Timeline } from '@rokkit/ui'

  const steps = [
    { label: 'Requirements', description: 'Gather project requirements.', completed: true },
    { label: 'Design', description: 'Create wireframes.', completed: true },
    { label: 'Development', description: 'Build the features.', active: true },
    { label: 'Testing', description: 'Run QA tests.' },
    { label: 'Deployment', description: 'Deploy to production.' }
  ]
</script>

<Timeline items={steps} />