# Timeline (UI SDK): Right to left

> The markers and the line move to the right side.

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

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

## Add this example

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

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

## Source

```tsx title="components/examples/ui-sdk-timeline/rtl.tsx"
import {
  Timeline,
  TimelineConnector,
  TimelineDescription,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
} from "@/components/ui/ui-sdk-timeline"

const events = [
  {
    title: "تم النشر",
    dateTime: "2026-11-10T14:32",
    time: "اليوم، 2:32 م",
    description: "الإصدار 2.4.1 متاح الآن في كل المناطق.",
  },
  {
    title: "نجحت الفحوصات",
    dateTime: "2026-11-10T14:20",
    time: "اليوم، 2:20 م",
    description: "اجتاز 312 اختبارًا.",
  },
  {
    title: "تم دمج الطلب",
    dateTime: "2026-11-10T13:58",
    time: "اليوم، 1:58 م",
    description: "دمجت آدا التغييرات في الفرع الرئيسي.",
  },
]

function UiSdkTimelineRtl() {
  return (
    <div dir="rtl" lang="ar" className="w-full max-w-sm">
      <Timeline aria-label="النشاط">
        {events.map((event) => (
          <TimelineItem key={event.title}>
            <TimelineMarker />
            <TimelineConnector />
            <TimelineTitle>{event.title}</TimelineTitle>
            <TimelineTime dateTime={event.dateTime}>{event.time}</TimelineTime>
            <TimelineDescription>{event.description}</TimelineDescription>
          </TimelineItem>
        ))}
      </Timeline>
    </div>
  )
}

export { UiSdkTimelineRtl }
```

## Props in this example

### 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)
- [Horizontal](https://hextaui.com/docs/ui-sdk-timeline/examples/horizontal)
- [Details](https://hextaui.com/docs/ui-sdk-timeline/examples/details)
- [Feed](https://hextaui.com/docs/ui-sdk-timeline/examples/feed)