Timeline

Preset

Variant

Palette

Size

Elevation

Orientation

Connector

Rounded

Round marker

Reverse

Completed (2/4)

download

Install

Clone the repository and run npm install to fetch every dependency.

tune

Configure

Tune the theme tokens in the customizer to match your brand.

rocket_launch

Deploy

Ship to production with the confidence of a tested system.

verified

Validate

Review the final rendering and collect user feedback.

Usage

Svelte

<Timeline orientation="vertical" palette="accent" completed={2}>
    {#snippet dot_install()}<span class="material-symbols-outlined">download</span>{/snippet}
    {#snippet dot_config()}<span class="material-symbols-outlined">tune</span>{/snippet}
    {#snippet dot_deploy()}<span class="material-symbols-outlined">rocket_launch</span>{/snippet}
    {#snippet dot_validate()}<span class="material-symbols-outlined">verified</span>{/snippet}

    <TimelineItem marker={dot_install} title="Install" meta="day 1">
        Clone the repository and run npm install.
    </TimelineItem>
    <TimelineItem marker={dot_config} title="Configure" meta="day 2">
        Tune the theme tokens to match your brand.
    </TimelineItem>
    <TimelineItem marker={dot_deploy} title="Deploy" meta="day 3">
        Ship to production with confidence.
    </TimelineItem>
    <TimelineItem marker={dot_validate} title="Validate" meta="day 4">
        Review the final rendering and gather feedback.
    </TimelineItem>
</Timeline> 

API

package_2

import type { TimelineVariant, TimelinePalette, TimelineSize, TimelineElevation, TimelineOrientation, TimelineConnectorStyle } from '@abhc/spektral-ui';

Timeline

Prop	Type	Default
variant	`"flat" \| "outlined" \| "ghost"`	`"ghost"`
palette	`"accent" \| "neutral" \| "error" \| "warning" \| "success" \| "info"`	`"accent"`
size	`"sm" \| "md" \| "lg"`	`"md"`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
orientation	`"vertical" \| "horizontal"`	`"vertical"`
connector	`"solid" \| "dashed" \| "mixed" \| "none"`	`"solid"`
rounded	`boolean`	`false`
completed	`number`	`0`
reverse	`boolean`	`false`
children	`Snippet`	`required`

Prop variant

Type "flat" | "outlined" | "ghost"

Default "ghost"

Prop palette

Default "accent"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop orientation

Type "vertical" | "horizontal"

Default "vertical"

Prop connector

Type "solid" | "dashed" | "mixed" | "none"

Default "solid"

Prop rounded

Type boolean

Default false

Prop completed

Type number

Default 0

Prop reverse

Type boolean

Default false

Prop children

Type Snippet

Default required

TimelineItem

Prop	Type	Default
marker	`Snippet`	`required`
title	`string`	`""`
meta	`string`	`""`
rounded	`boolean`	`false`
wide	`boolean`	`false`
children	`Snippet`	`undefined`

Prop marker

Type Snippet

Default required

Prop title

Type string

Default ""

Prop meta

Type string

Default ""

Prop rounded

Type boolean

Default false

Prop wide

Type boolean

Default false

Prop children

Type Snippet

Default undefined