Django Timeline Component

Timeline renders a vertical or horizontal sequence of events using daisyUI's timeline layout. Each c-lb.timeline.item holds a start, middle, and end slot for date labels, connectors, and event descriptions.

Basic Timeline

Preview

First event
Second event
Third event

Code

<c-lb.timeline>
    <c-lb.timeline.item first icon="rmx.checkbox-circle" end="First event" endBox />
    <c-lb.timeline.item icon="rmx.checkbox-circle" end="Second event" endBox />
    <c-lb.timeline.item last icon="rmx.checkbox-circle" end="Third event" endBox />
</c-lb.timeline>

Vertical

Preview

Design
Develop
Test
Deploy

Code

<c-lb.timeline direction="vertical">
    <c-lb.timeline.item first icon="rmx.checkbox-circle" start="Design" startBox />
    <c-lb.timeline.item icon="rmx.checkbox-circle" end="Develop" endBox />
    <c-lb.timeline.item icon="rmx.checkbox-circle" start="Test" startBox />
    <c-lb.timeline.item last icon="rmx.checkbox-circle" end="Deploy" endBox />
</c-lb.timeline>

With Start and End Content

Preview

2020

Started the project
2022

First release
2024

Major update

Code

<c-lb.timeline direction="vertical">
    <c-lb.timeline.item first start="2020" icon="rmx.checkbox-circle" end="Started the project" endBox />
    <c-lb.timeline.item start="2022" icon="rmx.checkbox-circle" end="First release" endBox />
    <c-lb.timeline.item last start="2024" icon="rmx.checkbox-circle" end="Major update" endBox />
</c-lb.timeline>

With Different Icons

Preview

Step 1

Sign up for an account
Step 2

Verify your identity
Step 3

Configure your settings
Step 4

Launch your project

Code

<c-lb.timeline>
    <c-lb.timeline.item first icon="rmx.mail" start="Step 1" end="Sign up for an account" endBox />
    <c-lb.timeline.item icon="rmx.shield" start="Step 2" end="Verify your identity" endBox />
    <c-lb.timeline.item icon="rmx.settings" start="Step 3" end="Configure your settings" endBox />
    <c-lb.timeline.item last icon="rmx.rocket" start="Step 4" end="Launch your project" endBox />
</c-lb.timeline>

Compact

Preview

Account created
Email verified
Profile completed
First login

Code

<c-lb.timeline compact>
    <c-lb.timeline.item first icon="rmx.checkbox-circle" end="Account created" endBox />
    <c-lb.timeline.item icon="rmx.checkbox-circle" end="Email verified" endBox />
    <c-lb.timeline.item icon="rmx.checkbox-circle" end="Profile completed" endBox />
    <c-lb.timeline.item last icon="rmx.checkbox-circle" end="First login" endBox />
</c-lb.timeline>

Colored Connectors

Preview

Order placed
Shipped
In transit
Delivered

Code

<c-lb.timeline>
    <c-lb.timeline.item first variant="success" icon="rmx.checkbox-circle" end="Order placed" endBox />
    <c-lb.timeline.item variant="success" icon="rmx.checkbox-circle" end="Shipped" endBox />
    <c-lb.timeline.item variant="success" icon="rmx.checkbox-circle" end="In transit" endBox />
    <c-lb.timeline.item last icon="rmx.close-circle" end="Delivered" endBox />
</c-lb.timeline>

Rich Content

Preview

Jan 2024
Project Kickoff

Assembled the team and defined project scope.
Mar 2024
Alpha Release

Core features built and tested internally.
Jun 2024
Public Launch

Released to production with full documentation.

Code

<c-lb.timeline snap direction="vertical">
    <c-lb.timeline.item first icon="rmx.checkbox-circle" variant="success">
        <c-slot name="startSlot">
            <c-lb.timeline.start class="text-end">
                <time datetime="2024-01-01">Jan 2024</time>
                <h3 class="font-bold text-lg">Project Kickoff</h3>
                <p class="text-sm">Assembled the team and defined project scope.</p>
            </c-lb.timeline.start>
        </c-slot>
    </c-lb.timeline.item>
    <c-lb.timeline.item icon="rmx.checkbox-circle" variant="success">
        <c-slot name="endSlot">
            <c-lb.timeline.end>
                <time datetime="2024-03-01">Mar 2024</time>
                <h3 class="font-bold text-lg">Alpha Release</h3>
                <p class="text-sm">Core features built and tested internally.</p>
            </c-lb.timeline.end>
        </c-slot>
    </c-lb.timeline.item>
    <c-lb.timeline.item last icon="rmx.checkbox-circle">
        <c-slot name="startSlot">
            <c-lb.timeline.start class="text-end">
                <time datetime="2024-06-01">Jun 2024</time>
                <h3 class="font-bold text-lg">Public Launch</h3>
                <p class="text-sm">Released to production with full documentation.</p>
            </c-lb.timeline.start>
        </c-slot>
    </c-lb.timeline.item>
</c-lb.timeline>

Custom Slots Override

Preview

Custom Start

Default end
2024

Custom End
With rich content

Code

<c-lb.timeline direction="vertical">
    <c-lb.timeline.item first icon="rmx.checkbox-circle" end="Default end">
        <c-slot name="startSlot">
            <div class="timeline-start timeline-box font-bold text-primary">Custom Start</div>
        </c-slot>
    </c-lb.timeline.item>
    <c-lb.timeline.item last start="2024">
        <c-slot name="middleSlot">
            <c-lb.timeline.middle>
                <c-lb.status variant="success" />
            </c-lb.timeline.middle>
        </c-slot>
        <c-slot name="endSlot">
            <c-lb.timeline.end box>
                <span class="font-bold">Custom End</span>
                <p class="text-sm">With rich content</p>
            </c-lb.timeline.end>
        </c-slot>
    </c-lb.timeline.item>
</c-lb.timeline>

API Reference

`c-lb.timeline`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
direction	horizontal vertical	-	No	Timeline layout direction
compact	boolean	`False`	No	Force all items to one side
snap	boolean	`False`	No	Align icon to start instead of middle

Slot Name	Description
default	Timeline items using timeline.item components

`c-lb.timeline.item`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
first	boolean	`False`	No	Mark as the first item (no hr before)
last	boolean	`False`	No	Mark as the last item (no hr after)
icon	string	-	No	Icon name to display
↳ .fill	modifier	-	No	Render in filled (solid) style
icon.class	string	-	No	Additional CSS classes for the icon
start	string	-	No	Text content for the start section
startBox	boolean	`False`	No	Apply timeline-box styling to the start section
end	string	-	No	Text content for the end section
endBox	boolean	`False`	No	Apply timeline-box styling to the end section
variant	neutral primary secondary accent info success warning error	-	No	Color variant applied to the icon and hr connectors

Slot Name	Description
default	Additional content or full manual control of the item
startSlot	Custom start content (overrides start prop)
middleSlot	Custom middle content (overrides icon prop)
endSlot	Custom end content (overrides end prop)

`c-lb.timeline.start`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
box	boolean	`False`	No	Apply box styling to the content

Slot Name	Description
default	Start content

`c-lb.timeline.middle`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
icon	string	-	No	Icon name to display
↳ .fill	modifier	-	No	Render in filled (solid) style
icon.class	string	-	No	Additional CSS classes for the icon

Slot Name	Description
default	Custom marker content (used alongside or instead of icon)

`c-lb.timeline.end`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
box	boolean	`False`	No	Apply box styling to the content

Slot Name	Description
default	End content

`c-lb.timeline.hr`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply (e.g., 'bg-primary' for colored connectors)