Timeline

A vertical or horizontal timeline rendered as an ordered list.

Data displaythird-partyMITChangelog Registry JSON

Overview

`value`: the current step. Items with step <= value get data-completed (filled indicator and separator), and the current one gets aria-current="step".
`TimelineItem`: composed from TimelineHeader (TimelineDate, TimelineTitle, TimelineIndicator), TimelineSeparator and TimelineContent.

Installation

CLI

Manual

1

Register the @fma-ds namespace in components.json (once)

components.json

{  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}

2
Add the item
```
pnpm dlx shadcn@latest add @fma-ds/timeline
```
Files land in components/fma-ds/timeline.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm: cn@^0.5.0
Registry: None