# Timeline (UI SDK): Horizontal

> `orientation="horizontal"` lays the events in a row, like a roadmap. Left and Right move between them, and `loop={false}` stops at the ends.

Canonical: https://hextaui.com/docs/ui-sdk-timeline/examples/horizontal

Component docs: https://hextaui.com/docs/ui-sdk-timeline

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-timeline-horizontal.json
```

This adds `components/examples/ui-sdk-timeline/horizontal.tsx` with the Timeline component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-timeline/horizontal.tsx"
import { IconCheck } from "@tabler/icons-react"

import {
  Timeline,
  TimelineConnector,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
  type TimelineStatus,
} from "@/components/ui/ui-sdk-timeline"

const milestones: {
  title: string
  dateTime: string
  time: string
  status: TimelineStatus
}[] = [
  {
    title: "Kickoff",
    dateTime: "2026-01",
    time: "January",
    status: "complete",
  },
  {
    title: "Design review",
    dateTime: "2026-03",
    time: "March",
    status: "complete",
  },
  { title: "Beta", dateTime: "2026-06", time: "June", status: "current" },
  {
    title: "Launch",
    dateTime: "2026-09",
    time: "September",
    status: "upcoming",
  },
]

function UiSdkTimelineHorizontal() {
  return (
    <Timeline
      orientation="horizontal"
      loop={false}
      aria-label="Roadmap"
      className="w-full max-w-xl"
    >
      {milestones.map((milestone) => (
        <TimelineItem key={milestone.title} status={milestone.status}>
          <TimelineMarker>
            {milestone.status === "complete" && (
              <IconCheck aria-hidden="true" />
            )}
          </TimelineMarker>
          <TimelineConnector />
          <TimelineTitle>{milestone.title}</TimelineTitle>
          <TimelineTime dateTime={milestone.dateTime}>
            {milestone.time}
          </TimelineTime>
        </TimelineItem>
      ))}
    </Timeline>
  )
}

export { UiSdkTimelineHorizontal }
```

## Props in this example

### Timeline

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` |  |
| `loop` | `boolean` | `true` |  |

### TimelineItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"complete" \| "current" \| "upcoming"` | – |  |

### TimelineTime

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dateTime` | `string` | – | A machine-readable date, time or duration. It describes the event. |

## More Timeline examples

- [Status](https://hextaui.com/docs/ui-sdk-timeline/examples/status)
- [Agent steps](https://hextaui.com/docs/ui-sdk-timeline/examples/agent)
- [Custom markers](https://hextaui.com/docs/ui-sdk-timeline/examples/markers)
- [Details](https://hextaui.com/docs/ui-sdk-timeline/examples/details)
- [Feed](https://hextaui.com/docs/ui-sdk-timeline/examples/feed)
- [Right to left](https://hextaui.com/docs/ui-sdk-timeline/examples/rtl)