元件
pinion-ui

Theme

Tune

Lang

Timeline

daisyUI 5 的 timeline 類別包裝，時序列表。items 陣列傳遞即可。orientation (vertical/horizontal)、compact (偏向一側)、snap (圖示貼上端)、appearance (solid 預設 / soft) 4 個修飾符。各項附加 state=done|current|upcoming 時中點圖示與連接線變色。預設 solid (濃主色) 使完成鏈明顯。穩和時只加選 appearance="soft"。

透過 items 陣列傳入 (vertical 為預設)

  • 10/01 09:12
    Order received
    Thank you for your order
  • 10/01 10:30
    Payment confirmed
    Paid by credit card
  • 10/02 14:00
    Preparing shipment
    Packing at the warehouse
  • 10/03 16:45
    Delivered
    Left with the recipient
<x-timeline :items="[
    ['title' => 'Order received',     'time' => '10/01 09:12', 'desc' => 'Thank you for your order'],
    ['title' => 'Payment confirmed',  'time' => '10/01 10:30', 'desc' => 'Paid by credit card'],
    ['title' => 'Preparing shipment', 'time' => '10/02 14:00', 'desc' => 'Packing at the warehouse'],
    ['title' => 'Delivered',          'time' => '10/03 16:45', 'desc' => 'Left with the recipient'],
]" />

<ul class="flex flex-col relative gap-sm">
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/01 09:12
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Order received
            </div>
<div class="text-sm text-base-content/70">
                Thank you for your order
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/01 10:30
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Payment confirmed
            </div>
<div class="text-sm text-base-content/70">
                Paid by credit card
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/02 14:00
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Preparing shipment
            </div>
<div class="text-sm text-base-content/70">
                Packing at the warehouse
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/03 16:45
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Delivered
            </div>
<div class="text-sm text-base-content/70">
                Left with the recipient
            </div>
</div>
</li>
</ul>

orientation=horizontal — 橫向排列的 4 個步驟

  • Step 1
    Cart
  • Step 2
    Shipping
  • Step 3
    Payment
  • Step 4
    Done
<x-timeline orientation="horizontal" :items="[
    ['title' => 'Cart',     'time' => 'Step 1'],
    ['title' => 'Shipping', 'time' => 'Step 2'],
    ['title' => 'Payment',  'time' => 'Step 3'],
    ['title' => 'Done',     'time' => 'Step 4'],
]" />

<ul class="flex flex-row relative gap-sm">
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative">
<div class="col-start-1 col-end-4 row-start-1 row-end-2 justify-self-center self-end text-xs text-base-content/60">
            Step 1
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="col-start-1 col-end-4 row-start-3 row-end-4 justify-self-center self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Cart
            </div>
</div>
<hr class="row-start-2 col-start-3 h-1 w-full my-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative">
<hr class="row-start-2 col-start-1 h-1 w-full my-auto bg-primary">
<div class="col-start-1 col-end-4 row-start-1 row-end-2 justify-self-center self-end text-xs text-base-content/60">
            Step 2
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="col-start-1 col-end-4 row-start-3 row-end-4 justify-self-center self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Shipping
            </div>
</div>
<hr class="row-start-2 col-start-3 h-1 w-full my-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative">
<hr class="row-start-2 col-start-1 h-1 w-full my-auto bg-primary">
<div class="col-start-1 col-end-4 row-start-1 row-end-2 justify-self-center self-end text-xs text-base-content/60">
            Step 3
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="col-start-1 col-end-4 row-start-3 row-end-4 justify-self-center self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Payment
            </div>
</div>
<hr class="row-start-2 col-start-3 h-1 w-full my-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative">
<hr class="row-start-2 col-start-1 h-1 w-full my-auto bg-primary">
<div class="col-start-1 col-end-4 row-start-1 row-end-2 justify-self-center self-end text-xs text-base-content/60">
            Step 4
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="col-start-1 col-end-4 row-start-3 row-end-4 justify-self-center self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Done
            </div>
</div>
</li>
</ul>

compact: 將所有 items 靠向一側

  • 2025/06
    Requirements
    Client hearing complete
  • 2025/07
    Design
    API and data model finalized
  • 2025/08
    Implementation
    Core feature development
  • 2025/09
    Release
    Shipped to production
<x-timeline compact :items="[
    ['title' => 'Requirements',   'time' => '2025/06', 'desc' => 'Client hearing complete'],
    ['title' => 'Design',         'time' => '2025/07', 'desc' => 'API and data model finalized'],
    ['title' => 'Implementation', 'time' => '2025/08', 'desc' => 'Core feature development'],
    ['title' => 'Release',        'time' => '2025/09', 'desc' => 'Shipped to production'],
]" />

<ul class="flex flex-col relative gap-sm">
<li class="grid grid-cols-[0_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start text-xs text-base-content/60">
            2025/06
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Requirements
            </div>
<div class="text-sm text-base-content/70">
                Client hearing complete
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[0_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start text-xs text-base-content/60">
            2025/07
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Design
            </div>
<div class="text-sm text-base-content/70">
                API and data model finalized
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[0_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start text-xs text-base-content/60">
            2025/08
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Implementation
            </div>
<div class="text-sm text-base-content/70">
                Core feature development
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[0_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start text-xs text-base-content/60">
            2025/09
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Release
            </div>
<div class="text-sm text-base-content/70">
                Shipped to production
            </div>
</div>
</li>
</ul>

snap: 將 middle icon 吸附到頂端

  • Week 1
    Research
    Market research and competitor analysis
  • Week 2
    Prototype
    MVP UI in Figma
  • Week 3
    User test
    Five moderated sessions
  • Week 4
    Implementation
    Build the validated flow
<x-timeline snap :items="[
    ['title' => 'Research',       'time' => 'Week 1', 'desc' => 'Market research and competitor analysis'],
    ['title' => 'Prototype',      'time' => 'Week 2', 'desc' => 'MVP UI in Figma'],
    ['title' => 'User test',      'time' => 'Week 3', 'desc' => 'Five moderated sessions'],
    ['title' => 'Implementation', 'time' => 'Week 4', 'desc' => 'Build the validated flow'],
]" />

<ul class="flex flex-col relative gap-sm">
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[0.5rem_auto_1fr] items-center relative justify-items-center">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            Week 1
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Research
            </div>
<div class="text-sm text-base-content/70">
                Market research and competitor analysis
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[0.5rem_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            Week 2
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Prototype
            </div>
<div class="text-sm text-base-content/70">
                MVP UI in Figma
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[0.5rem_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            Week 3
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                User test
            </div>
<div class="text-sm text-base-content/70">
                Five moderated sessions
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[0.5rem_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            Week 4
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Implementation
            </div>
<div class="text-sm text-base-content/70">
                Build the validated flow
            </div>
</div>
</li>
</ul>

state per item: done / current / upcoming 會改變 icon·connector 的顏色

  • 10/01 09:12
    Order received
    Completed
  • 10/01 10:30
    Payment confirmed
    Completed
  • 10/02
    Preparing shipment
    In progress
  • scheduled
    Delivery
    Not started
  • scheduled
    Receipt confirmed
    Not started
<x-timeline :items="[
    ['title' => 'Order received',     'time' => '10/01 09:12', 'desc' => 'Completed', 'state' => 'done'],
    ['title' => 'Payment confirmed',  'time' => '10/01 10:30', 'desc' => 'Completed', 'state' => 'done'],
    ['title' => 'Preparing shipment', 'time' => '10/02',       'desc' => 'In progress', 'state' => 'current'],
    ['title' => 'Delivery',           'time' => 'scheduled',   'desc' => 'Not started', 'state' => 'upcoming'],
    ['title' => 'Receipt confirmed',  'time' => 'scheduled',   'desc' => 'Not started', 'state' => 'upcoming'],
]" />

<ul class="flex flex-col relative gap-sm">
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/01 09:12
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Order received
            </div>
<div class="text-sm text-base-content/70">
                Completed
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/01 10:30
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Payment confirmed
            </div>
<div class="text-sm text-base-content/70">
                Completed
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/30">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            10/02
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Preparing shipment
            </div>
<div class="text-sm text-base-content/70">
                In progress
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-base-content/30">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/15">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            scheduled
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content/40">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Delivery
            </div>
<div class="text-sm text-base-content/70">
                Not started
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-base-content/15">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/15">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            scheduled
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content/40">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Receipt confirmed
            </div>
<div class="text-sm text-base-content/70">
                Not started
            </div>
</div>
</li>
</ul>

appearance — solid (default, saturated) vs soft (opt-in, muted)

  • done
    Step 1
  • done
    Step 2
  • done
    Step 3
  • current
    Step 4
  • upcoming
    Step 5
  • done
    Step 1
  • done
    Step 2
  • done
    Step 3
  • current
    Step 4
  • upcoming
    Step 5
<x-timeline :items="[
    ['title' => 'Step 1', 'time' => 'done',     'state' => 'done'],
    ['title' => 'Step 2', 'time' => 'done',     'state' => 'done'],
    ['title' => 'Step 3', 'time' => 'done',     'state' => 'done'],
    ['title' => 'Step 4', 'time' => 'current',  'state' => 'current'],
    ['title' => 'Step 5', 'time' => 'upcoming', 'state' => 'upcoming'],
]" />
<x-timeline appearance="soft" :items="[
    ['title' => 'Step 1', 'time' => 'done',     'state' => 'done'],
    ['title' => 'Step 2', 'time' => 'done',     'state' => 'done'],
    ['title' => 'Step 3', 'time' => 'done',     'state' => 'done'],
    ['title' => 'Step 4', 'time' => 'current',  'state' => 'current'],
    ['title' => 'Step 5', 'time' => 'upcoming', 'state' => 'upcoming'],
]" />

<ul class="flex flex-col relative gap-sm">
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            done
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 1
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            done
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 2
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            done
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 3
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/30">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            current
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 4
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-base-content/30">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/15">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            upcoming
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content/40">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 5
            </div>
</div>
</li>
</ul>
<ul class="flex flex-col relative gap-sm">
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            done
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary/70">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 1
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary/30">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary/30">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            done
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary/70">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 2
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary/30">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-primary/30">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            done
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-primary/70">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 3
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-primary/30">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/30">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            current
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 4
            </div>
</div>
<hr class="row-start-3 col-start-2 w-1 h-full mx-auto bg-base-content/30">
</li>
<li class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] items-center relative justify-items-center">
<hr class="row-start-1 col-start-2 w-1 h-full mx-auto bg-base-content/15">
<div class="row-start-1 row-end-4 col-start-1 col-end-2 self-center justify-self-end text-xs text-base-content/60">
            upcoming
        </div>
<div class="row-start-2 col-start-2">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentcolor" class="h-5 w-5 text-base-content/40">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
</div>
<div class="row-start-1 row-end-4 col-start-3 col-end-4 self-center justify-self-start rounded-[var(--radius-box)] tune-border border-base-300 bg-base-100 shadow-[var(--shadow-box)] py-2 px-4 text-xs">
<div class="font-medium">
                Step 5
            </div>
</div>
</li>
</ul>

solid (左) = 預設的 text-primary / bg-primary。soft (右) = done icon 變為 text-primary/70、connector 變為 bg-primary/30，呈現柔和效果。