New components library - Native UI

︲

︲

Timeline

A visual representation of events in chronological order.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component timeline
from components.ui.timeline import timeline
timeline.root( timeline.item( timeline.indicator(), timeline.separator(), timeline.header( timeline.date(), timeline.title(), ), timeline.content(), step=1, active_step=1, ), )

Project kickoff

Initial planning and team onboarding.

Design phase

Wireframes and prototypes completed.

Development

Core features implemented.

Launch

Public release.
from components.ui.timeline import timeline


def timeline_basic():
    return timeline.root(
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date(
                    "Jan 2024",
                    class_name="sm:group-data-[orientation=vertical]/timeline:absolute sm:group-data-[orientation=vertical]/timeline:-left-32 sm:group-data-[orientation=vertical]/timeline:w-20 sm:group-data-[orientation=vertical]/timeline:text-right",
                ),
                timeline.title("Project kickoff"),
            ),
            timeline.content("Initial planning and team onboarding."),
            step=1,
            active_step=3,
        ),
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Feb 2024"),
                timeline.title("Design phase"),
            ),
            timeline.content("Wireframes and prototypes completed."),
            step=2,
            active_step=3,
        ),
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Mar 2024"),
                timeline.title("Development"),
            ),
            timeline.content("Core features implemented."),
            step=3,
            active_step=3,
        ),
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Apr 2024"),
                timeline.title("Launch"),
            ),
            timeline.content("Public release."),
            step=4,
            active_step=3,
        ),
        orientation="vertical",
    )

Left-Aligned Dates

Set the data-[] CSS prop to -left-32 to align dates to the left.

Project kickoff

Initial planning and team onboarding.

Design phase

Wireframes and prototypes completed.

Development

Core features implemented.

Launch

Public release.
from components.ui.timeline import timeline

left_align_date = "sm:group-data-[orientation=vertical]/timeline:absolute sm:group-data-[orientation=vertical]/timeline:-left-32 sm:group-data-[orientation=vertical]/timeline:w-20 sm:group-data-[orientation=vertical]/timeline:text-right"


def timeline_left_aligned_dates():
    return timeline.root(
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Jan 2024", class_name=left_align_date),
                timeline.title("Project kickoff"),
            ),
            timeline.content("Initial planning and team onboarding."),
            step=1,
            active_step=3,
        ),
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Feb 2024", class_name=left_align_date),
                timeline.title("Design phase"),
            ),
            timeline.content("Wireframes and prototypes completed."),
            step=2,
            active_step=3,
        ),
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Mar 2024", class_name=left_align_date),
                timeline.title("Development"),
            ),
            timeline.content("Core features implemented."),
            step=3,
            active_step=3,
        ),
        timeline.item(
            timeline.indicator(),
            timeline.separator(),
            timeline.header(
                timeline.date("Apr 2024", class_name=left_align_date),
                timeline.title("Launch"),
            ),
            timeline.content("Public release."),
            step=4,
            active_step=3,
        ),
        orientation="vertical",
    )

API Reference

timeline.root

PropTypeDefaultDescription
orientation"horizontal" | "vertical""vertical"Controls whether timeline items render vertically or horizontally.
class_namestr""Additional classes applied to the root container.
**propsAny—Additional props forwarded to the underlying div.

timeline.item

PropTypeDefaultDescription
stepint—Step number for the item.
active_stepint—Current active step used to determine completion state.
class_namestr""Additional classes applied to the item container.
**propsAny—Additional props forwarded to the underlying div.

timeline.header

PropTypeDefaultDescription
class_namestr""Additional classes applied to the header.
**propsAny—Additional props forwarded to the underlying div.

timeline.title

PropTypeDefaultDescription
class_namestr""Additional classes applied to the title.
**propsAny—Additional props forwarded to the underlying h3.

timeline.content

PropTypeDefaultDescription
class_namestr""Additional classes applied to the content container.
**propsAny—Additional props forwarded to the underlying div.

timeline.date

PropTypeDefaultDescription
class_namestr""Additional classes applied to the date element.
**propsAny—Additional props forwarded to the underlying time.

timeline.indicator

PropTypeDefaultDescription
class_namestr""Additional classes applied to the indicator.
aria_hiddenboolTrueHidden from assistive technologies.
**propsAny—Additional props forwarded to the underlying div.

timeline.separator

PropTypeDefaultDescription
class_namestr""Additional classes applied to the separator.
aria_hiddenboolTrueHidden from assistive technologies.
**propsAny—Additional props forwarded to the underlying div.