コンポーネント一覧
pinion-ui

Theme

Tune

Lang

Timeline

daisyUI 5 の timeline class を wrap した時系列リスト。items 配列で渡すだけ。orientation (vertical/horizontal)・compact (片側寄せ)・snap (アイコンを上端 snap)・appearance (solid default / soft) の 4 modifier。各 item に state=done|current|upcoming を付けると middle icon と connector の色が変化。default は solid (濃い primary) で done chain がはっきり立つ。穏やかに見せたいときだけ appearance="soft" を opt-in。

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 を上端 snap

  • 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 (左) = default の text-primary / bg-primary。soft (右) = done icon が text-primary/70 + connector が bg-primary/30 で muted。