---
title: Timeline
description: Use the timeline component to display a list of connected items as a vertical timeline.
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Timeline/Timeline.tsx
storybook: '/brand/storybook/?path=/story/components-timeline--default'
---
```js
import {Timeline} from '@primer/react-brand'
```
## Examples
> Timeline requires the `dir` attribute to be set on the `` element to ensure the correct visual appearance of timeline items.
### Default
```jsx
GitHub Codespaces offers a complete dev environment in seconds, so you can code, build, test, and open pull requests
from any repo anywhere.
GitHub Copilot is your AI pair programmer that empowers you to complete tasks 55% faster by turning natural language
prompts into coding suggestions.
GitHub Actions automates your build, test, and deployment workflow with simple and secure CI/CD.
```
### With emphasis
Use a `` element within the timeline items to apply a duotone style and emphasize part of the text.
```jsx
GitHub Codespaces offers a complete dev environment in seconds, so you can code, build, test, and open pull
requests from any repo anywhere.
GitHub Copilot is your AI pair programmer that empowers you to complete tasks 55% faster by turning natural
language prompts into coding suggestions.
GitHub Actions automates your build, test, and deployment workflow with simple and secure CI/CD.
```
### Timeline
| Name | Type | Default | Description |
| :---------- | :--------------------------------- | :-----: | :------------------------------------------- |
| `className` | `string` | | Sets a custom class on the root element |
| `children` | `Timeline.Item`, `Timeline.Item[]` | | Content to be displayed within the component |
| `fullWidth` | `boolean` | `false` | Fills available space |
### Timeline.Item
| Name | Type | Default | Description |
| :---------- | :------------------------------------- | :-----: | :--------------------------------------- |
| `className` | `string` | | Sets a custom class on the root element |
| `children` | `React.ReactNode`, `React.ReactNode[]` | | Content to be displayed within the item. |