Component reference
Timeline
A sequence of security-review events.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Security review
Dependency audit
No critical advisoriespassed
Penetration test
Scheduled with the external teamin progress
Width adapts to the available space
"use client";
import {
Card,
CardHeader,
CardTitle,
CardContent,
Timeline,
TimelineItem,
TimelineContent,
TimelineTitle,
TimelineDescription,
Badge
} from "@pimolu/react";
export function DemoExample() {
return (
<Card>
<CardHeader>
<CardTitle>Security review</CardTitle>
</CardHeader>
<CardContent>
<Timeline aria-label="Security review">
<TimelineItem status="complete">
<TimelineContent>
<TimelineTitle>Dependency audit</TimelineTitle>
<TimelineDescription>
<span className="flex flex-wrap items-center gap-3 min-w-0">
No critical advisories
<Badge variant="success">passed</Badge>
</span>
</TimelineDescription>
</TimelineContent>
</TimelineItem>
<TimelineItem status="active">
<TimelineContent>
<TimelineTitle>Penetration test</TimelineTitle>
<TimelineDescription>
<span className="flex flex-wrap items-center gap-3 min-w-0">
Scheduled with the external team
<Badge variant="warning">in progress</Badge>
</span>
</TimelineDescription>
</TimelineContent>
</TimelineItem>
</Timeline>
</CardContent>
</Card>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Order tracking
Completed, active and upcoming entries share one list. The active entry exposes aria-current.
Explicit indicator
TimelineIndicator and TimelineContent can be composed directly when the entry needs a custom marker or an error state.
Compact activity feed
The compact variant tightens spacing and type, with plain markers for entries without a status.
Usage
Use meaningful event titles and explicit times; distinguish process state from chronological order.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTimelineProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
variant | PimoluTimelineVariant | undefined | "default" | Density of the list. Defaults to "default". |
align | PimoluTimelineAlign | undefined | "start" | Align indicators with the top or the middle of each entry. Defaults to "start". |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLOListElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLOListElement> | undefined | — | Standard React/HTML attribute. |
variantPimoluTimelineVariant | undefinedDefault: "default"
Density of the list. Defaults to "default".
alignPimoluTimelineAlign | undefinedDefault: "start"
Align indicators with the top or the middle of each entry. Defaults to "start".
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLOListElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLOListElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluTimelineItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
status | PimoluTimelineStatus | undefined | "default" | Progression state of this entry. Defaults to "default". |
icon | ReactNode | — | Decorative icon shown inside the generated indicator. |
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLLIElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLLIElement> | undefined | — | Standard React/HTML attribute. |
statusPimoluTimelineStatus | undefinedDefault: "default"
Progression state of this entry. Defaults to "default".
iconReactNodeNo default extracted.
Decorative icon shown inside the generated indicator.
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLLIElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLLIElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluTimelineIndicatorProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluTimelineContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluTimelineTitleProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
as | PimoluTimelineTitleElement | undefined | "h3" | Heading level, or "div" to avoid changing the document outline. |
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
asPimoluTimelineTitleElement | undefinedDefault: "h3"
Heading level, or "div" to avoid changing the document outline.
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluTimelineDescriptionProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLParagraphElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLParagraphElement> | undefined | — | Standard React/HTML attribute. |
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLParagraphElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLParagraphElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluTimelineTimeProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
dateTime | string | undefined | — | Machine-readable date or date-time, for example "2026-10-19T09:15". |
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLTimeElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLTimeElement> | undefined | — | Standard React/HTML attribute. |
dateTimestring | undefinedNo default extracted.
Machine-readable date or date-time, for example "2026-10-19T09:15".
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLTimeElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLTimeElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Keep the reading order coherent and explain statuses without relying on marker color.