Photonix

Timeline

Displays a sequence of events.

Preview

  • Order Placed

    Jan 1, 2023

  • Shipped

    Jan 2, 2023

  • Delivered

    Pending

Usage
import { Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineContent } from '@photonix/ultimate';

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
    </TimelineSeparator>
    <TimelineContent>Step 1</TimelineContent>
  </TimelineItem>
</Timeline>

Component API

Timeline

Prop
Type
Default
Description
children
React.ReactNode
-
Children elements (TimelineItem)

TimelineDot

Prop
Type
Default
Description
variant
"primary" | "default" | "success" | "error" | "warning"
'default'
Variant/Color of the dot
children
React.ReactNode
-
Custom icon or content inside the dot

TimelineItem/Separator/Content

Prop
Type
Default
Description
children
ReactNode
-
Content.
className
string
-
Additional CSS class.

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System