Timeline - Rails UI Components

2 hours ago

User signed up for the platform

Yesterday

Order #1234 was completed

3 days ago

Payment pending review

Usage

<%= ui.timeline do %>
  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :success %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "2 hours ago" %>
      <p>Event description here</p>
    <% end %>
  <% end %>
<% end %>

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`timeline_item`	`ui.timeline_item`	A single item in the timeline. Contains a dot and content area.
`timeline_dot`	`ui.timeline_dot`	The dot/marker for a timeline item.
`timeline_content`	`ui.timeline_content`	The content area for a timeline item.
`timeline_time`	`ui.timeline_time`	The time/date label for a timeline item.

Examples

Basic timeline

Today

Account created successfully

Yesterday

Profile information updated

<%= ui.timeline do %>
  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :success %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Today" %>
      <p>Account created successfully</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Yesterday" %>
      <p>Profile information updated</p>
    <% end %>
  <% end %>
<% end %>

Timeline with icons

2 hours ago

Order delivered

Package was signed by John Doe

1 day ago

Out for delivery

Driver assigned: Mike Smith

2 days ago

Shipped from warehouse

<%= ui.timeline do %>
  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :success, icon: "check" %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "2 hours ago" %>
      <p class="font-medium">Order delivered</p>
      <p class="text-sm text-muted-foreground">Package was signed by John Doe</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :info, icon: "truck" %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "1 day ago" %>
      <p class="font-medium">Out for delivery</p>
      <p class="text-sm text-muted-foreground">Driver assigned: Mike Smith</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :default, icon: "cube" %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "2 days ago" %>
      <p class="font-medium">Shipped from warehouse</p>
    <% end %>
  <% end %>
<% end %>

All variants

Default

Default variant

Info

Info variant

Success

Success variant

Warning

Warning variant

Error

Error variant

<%= ui.timeline do %>
  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :default %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Default" %>
      <p>Default variant</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :info %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Info" %>
      <p>Info variant</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :success %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Success" %>
      <p>Success variant</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :warning %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Warning" %>
      <p>Warning variant</p>
    <% end %>
  <% end %>

  <%= ui.timeline_item do %>
    <%= ui.timeline_dot variant: :error %>
    <%= ui.timeline_content do %>
      <%= ui.timeline_time "Error" %>
      <p>Error variant</p>
    <% end %>
  <% end %>
<% end %>