REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Data Display
Timeline
Displays a chronological sequence of events with dots and connectors.
Example
Preview
Code
Props
Timeline Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the timeline container.
variant
'solid' | 'outline'
'solid'
The visual style of timeline dots.
TimelineItem Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for an individual timeline entry.
TimelineDot Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the timeline dot indicator.
TimelineConnector Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the connector line between dots.
TimelineContent Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the content area of a timeline entry.
Usage Guidelines
When to use
Use Timeline to show a chronological or sequential list of events, activities, or steps.
Best practices
•
Order timeline items chronologically — most recent first or last depending on context.
•
Use TimelineDot color to differentiate event types or statuses.
•
Keep TimelineContent concise — link to detail views for lengthy content.
Accessibility
Timeline renders as a list. Screen readers traverse items in DOM order. Provide descriptive text in TimelineContent for each event.
Related Components
Stepper
A multi-step progress indicator showing completion through sequential steps.
List
A compound list component for displaying ordered or unordered items.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.