# Timeline
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/timeline
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(data-display)/timeline.mdx
> A composable, read-only chronology for activity feeds, audit trails, incident logs, and centered milestone roadmaps.
***
## Import
```tsx
import { Timeline } from '@darkcode-ui/react';
```
### Usage
Timeline is for read-only chronology: activity feeds, audit trails, incident history, release logs,
and milestone roadmaps. Use [Stepper](/react/components/stepper) when the user is moving through a
known sequence where current, complete, and upcoming steps are the primary meaning.
```tsx
import {Timeline} from "@darkcode-ui/react";
type Status = "default" | "current" | "success" | "warning" | "danger" | "muted";
const events: {title: string; time: string; description: string; status: Status}[] = [
{
description: "Traffic is now served from the new revision across all regions.",
status: "success",
time: "10:24 AM",
title: "Deploy completed",
},
{
description: "The canary build is rolling out to 10% of production pods.",
status: "current",
time: "10:12 AM",
title: "Rolling out canary",
},
{
description: "Container image built and pushed to the registry.",
status: "default",
time: "10:03 AM",
title: "Image built",
},
{
description: "A new commit landed on the main branch.",
status: "muted",
time: "09:58 AM",
title: "Commit pushed",
},
];
export function Default() {
return (
{events.map((event) => (
{event.title}
{event.description}
))}
);
}
```
### Anatomy
Import the Timeline component and access all parts using dot notation.
```tsx
import { Timeline } from '@darkcode-ui/react';
export default () => (
Event title
Event details
);
```
Timeline intentionally owns only the chronology layout. It renders an `ol` with `li` items, keeps
connectors decorative, hides empty markers from assistive technology, and marks `status="current"`
items with `aria-current="true"`. Use semantic HTML and other DarkCode UI components such as
[Card](/react/components/card), [Chip](/react/components/chip), and
[Avatar](/react/components/avatar) inside `Timeline.Content` for the event content itself.
The `Timeline.Rail`, `Timeline.Marker`, and `Timeline.Connector` parts are optional — when omitted,
each renders a sensible default. The example below is equivalent to the verbose anatomy above:
```tsx
Event title
```
### Content Subparts
Instead of hand-rolling markup, compose the optional `Timeline.Header`, `Timeline.Title`,
`Timeline.Time`, and `Timeline.Description` parts inside `Timeline.Content`. `Timeline.Time` renders a
semantic `