sigpro-ui/docs/components/timeline.md

Timeline

Timeline component for displaying chronological events, steps, or progress with customizable icons and content.

Tag

Timeline

Props

Prop	Type	Default	Description
items	Array<TimelineItem> | Signal	[]	Timeline items to display
vertical	boolean | Signal<boolean>	true	Vertical or horizontal orientation
compact	boolean | Signal<boolean>	false	Compact mode with less padding
class	string	''	Additional CSS classes (DaisyUI + Tailwind)

TimelineItem Structure

Property	Type	Description
title	string | VNode | Signal	Event title or main text
detail	string | VNode | Signal	Additional details or description
icon	string | VNode	Custom icon (overrides type)
type	string	Type: 'success', 'warning', 'error', 'info'
completed	boolean	Whether event is completed (affects connector)

Styling

Timeline supports all daisyUI Timeline classes:

Category	Keywords	Description
Base	timeline, timeline-vertical, timeline-horizontal	Timeline orientation
Size	timeline-compact	Compact spacing variant
Color	bg-primary, bg-success, bg-warning, bg-error, bg-info	Icon background colors

For further details, check the daisyUI Timeline Documentation – Full reference for CSS classes.

Live Examples

Basic Timeline

Live Demo

const BasicDemo = () => {
  const events = [
    { title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true },
    { title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true },
    { title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false },
    { title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false },
    { title: 'Launch', detail: 'Production deployment', type: 'success', completed: false }
  ];
  
  return Timeline({ items: events });
};
$mount(BasicDemo, '#demo-basic');

Horizontal Timeline

Live Demo

const HorizontalDemo = () => {
  const steps = [
    { title: 'Step 1', detail: 'Requirements', type: 'success', completed: true },
    { title: 'Step 2', detail: 'Design', type: 'success', completed: true },
    { title: 'Step 3', detail: 'Development', type: 'warning', completed: false },
    { title: 'Step 4', detail: 'Testing', type: 'info', completed: false },
    { title: 'Step 5', detail: 'Deploy', type: 'info', completed: false }
  ];
  
  return Timeline({ 
    items: steps, 
    vertical: false,
    class: 'min-w-[600px]'
  });
};
$mount(HorizontalDemo, '#demo-horizontal');

Compact Timeline

Live Demo

const CompactDemo = () => {
  const activities = [
    { title: 'User login', detail: '10:30 AM', type: 'success', completed: true },
    { title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true },
    { title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true },
    { title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false }
  ];
  
  return Timeline({ 
    items: activities, 
    compact: true 
  });
};
$mount(CompactDemo, '#demo-compact');

Custom Icons

Live Demo

const IconsDemo = () => {
  const milestones = [
    { title: 'Kickoff', detail: 'Project kickoff meeting', icon: '🚀', completed: true },
    { title: 'MVP', detail: 'Minimum viable product', icon: '💡', completed: true },
    { title: 'Beta', detail: 'Beta release', icon: '⚙️', completed: false },
    { title: 'Launch', detail: 'Public launch', icon: '🎉', completed: false }
  ];
  
  return Timeline({ items: milestones });
};
$mount(IconsDemo, '#demo-icons');

Reactive Timeline

Live Demo

const ReactiveDemo = () => {
  const currentStep = $(0);
  const steps = [
    { title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success' },
    { title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success' },
    { title: 'Shipped', detail: 'Package on the way', type: 'warning' },
    { title: 'Delivered', detail: 'Arriving soon', type: 'info' }
  ];
  
  const items = () => steps.map((step, idx) => ({
    ...step,
    completed: idx < currentStep()
  }));
  
  const nextStep = () => {
    if (currentStep() < steps.length) {
      currentStep(currentStep() + 1);
      Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500);
    }
  };
  
  const reset = () => {
    currentStep(0);
    Toast('Order tracking reset', 'alert-warning', 1500);
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Timeline({ items: items }),
    Div({ class: 'flex gap-2 justify-center mt-4' }, [
      Button({ 
        class: 'btn btn-primary btn-sm',
        onclick: nextStep,
        disabled: () => currentStep() >= steps.length
      }, 'Next Step'),
      Button({ 
        class: 'btn btn-ghost btn-sm',
        onclick: reset,
        disabled: () => currentStep() === 0
      }, 'Reset')
    ])
  ]);
};
$mount(ReactiveDemo, '#demo-reactive');

Order Status Tracker

Live Demo

const OrderDemo = () => {
  const status = $('pending');  // ← empezar en 'pending'
  
  const statusMap = {
    pending: { title: 'Order Pending', detail: 'Awaiting confirmation', type: 'warning' },
    confirmed: { title: 'Order Confirmed', detail: 'Payment received', type: 'info' },
    processing: { title: 'Processing', detail: 'Preparing your order', type: 'info' },
    shipped: { title: 'Shipped', detail: 'Package in transit', type: 'info' },
    delivered: { title: 'Delivered', detail: 'Order completed', type: 'success' }
  };
  
  const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
  const currentIndex = () => statusOrder.indexOf(status());
  
  const items = () => statusOrder.map((key, idx) => ({
    ...statusMap[key],
    completed: idx < currentIndex()
  }));
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Timeline({ items, compact: true }),
    Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s => 
      Button({ 
        class: () => `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`,
        onclick: () => status(s)
      }, statusMap[s].title)
    ))
  ]);
};
$mount(OrderDemo, '#demo-order');

Company History

Live Demo

const HistoryDemo = () => {
  const milestones = [
    { title: '2015 - Founded', detail: 'Company started with 3 employees', type: 'success', completed: true },
    { title: '2017 - First Product', detail: 'Launched first software product', type: 'success', completed: true },
    { title: '2019 - Series A', detail: 'Raised $5M, expanded to 50 employees', type: 'success', completed: true },
    { title: '2022 - Global Expansion', detail: 'Opened offices in Europe and Asia', type: 'info', completed: true },
    { title: '2024 - AI Integration', detail: 'Launched AI-powered features', type: 'warning', completed: false },
    { title: '2026 - Future Goals', detail: 'Aiming for market leadership', type: 'info', completed: false }
  ];
  
  return Timeline({ items: milestones });
};
$mount(HistoryDemo, '#demo-history');

All Variants

Live Demo

const VariantsDemo = () => {
  const sampleItems = [
    { title: 'Event 1', detail: 'Description here', type: 'success', completed: true },
    { title: 'Event 2', detail: 'Description here', type: 'warning', completed: false },
    { title: 'Event 3', detail: 'Description here', type: 'info', completed: false }
  ];
  
  return Div({ class: 'flex flex-col gap-8' }, [
    Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'),
    Timeline({ items: sampleItems }),
    
    Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'),
    Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }),
    
    Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'),
    Timeline({ items: sampleItems, compact: true })
  ]);
};
$mount(VariantsDemo, '#demo-variants');