content/docs/components/radix/timeline.mdx
<ComponentPreview styleName="radix-nova" name="c-timeline-1" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-2" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-3" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-4" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-5" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-6" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-7" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-8" className="**:[.preview]:h-auto" />
<ComponentPreview styleName="radix-nova" name="c-timeline-9" className="**:[.preview]:h-auto" />
npx shadcn@latest add @reui/r-timeline
<Step>Install the following dependencies:</Step>
npm install radix-ui
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource styleName="radix-nova" name="timeline" title="components/reui/timeline.tsx" />
</Steps> </TabsContent> </CodeTabs>import {
Timeline,
TimelineContent,
TimelineDate,
TimelineHeader,
TimelineIndicator,
TimelineItem,
TimelineSeparator,
TimelineTitle,
} from "@/components/reui/r-timeline"
<Timeline>
<TimelineItem step={1}>
<TimelineHeader>
<TimelineDate>March 2024</TimelineDate>
<TimelineTitle>Project Initialized</TimelineTitle>
</TimelineHeader>
<TimelineIndicator />
<TimelineSeparator />
<TimelineContent>
Successfully set up the project repository and initial architecture.
</TimelineContent>
</TimelineItem>
</Timeline>
The root component for the timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | 1 | The initial active step. |
value | number | - | The current active step (controlled). |
onValueChange | (value: number) => void | - | Callback fired when the active step changes. |
orientation | "horizontal" | "vertical" | "vertical" | The layout orientation of the timeline. |
A single item in the timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
step | number | - | Required. The step number for this item. |
The date or time label for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the date label. |
The title for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the title. |
The visual indicator (usually a dot) for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the indicator. |
The line connecting timeline indicators.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the separator line. |
A container for the date and title.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the header container. |
The main descriptive content for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the content container. |