Catalog Progress

<.timeline>

ConnieUI.Progress

Created by Sofie Lindqvist

3 September 2026

Sent to 2 signers

4 September 2026

Signed by everyone

7 September 2026

HEEx 
<div class="w-md">
  <ConnieUI.Progress.timeline>
    <:step status={:complete}>
      <ConnieUI.Typography.heading level="h3">Created by Sofie Lindqvist</ConnieUI.Typography.heading>
      <ConnieUI.Typography.muted>3 September 2026</ConnieUI.Typography.muted>
    </:step>
    <:step status={:complete}>
      <ConnieUI.Typography.heading level="h3">Sent to 2 signers</ConnieUI.Typography.heading>
      <ConnieUI.Typography.muted>4 September 2026</ConnieUI.Typography.muted>
    </:step>
    <:step status={:current}>
      <ConnieUI.Typography.heading level="h3">Signed by everyone</ConnieUI.Typography.heading>
      <ConnieUI.Typography.muted>7 September 2026</ConnieUI.Typography.muted>
    </:step>
  </ConnieUI.Progress.timeline>
</div>

Controls

This component has no attributes the panel can set.

Set by the example

class

Docs

Vertical step indicator, based on UntitledUI Progress.IconsWithText. Shows a vertical timeline of completed steps with icons and connector lines. ## Examples <ConnieUI.Progress.timeline> <:step :for={entry <- @entries} status={if(entry.latest?, do: :current, else: :complete)}> <div class="text-sm font-semibold text-secondary">{entry.title}</div> </:step> </ConnieUI.Progress.timeline>
Attribute Type Default Description
class :any nil
Slot Slot attributes Description
:step * status