shadcn.io is not affiliated with official shadcn/ui
Horizontal Timeline Logos Block for Svelte
A timeline of six nature reserves that signed on to a wildlife-survey product, one per year: a wordmark above each node on a rail-to-rail rule, Year 1 to Year 6 under it.
Installation
Overview
A logo timeline for Svelte with Ark UI. Under a centred header, "A new reserve every year", six customer wordmarks stand along one horizontal rule that runs from rail to rail with + marks where it meets the rails: a wordmark above each node, "Year 1" to "Year 6" under it. On a phone the same list turns vertical, with the rule at the start side and a node beside each wordmark. The years are relative, never a calendar date, so the block does not go stale. It is an ordered list, built from Guides and Lucide icons, with a CSS entrance and your theme's tokens for every colour. For a "who joined when" story: a customer history, a partner programme, a roadmap of launch customers.
FAQ
How do I change the customers or the years?
Edit RESERVES at the top of the file, in the order they joined: a name, a Lucide icon, a lettering and a mark. The label under each node is "Year" and the item's position, so reorder the list to change the story, or replace it with your own labels in the markup. Six fit one row from md; for another count change md:grid-cols-6.
How is the rule drawn?
A decorative box, positioned on the node row, holds a Guides component that draws its top rule and the two + marks where the rule meets the rails; on a phone the same box is a one-pixel vertical line instead. The node row's height is fixed (6rem for the wordmark, 1.5rem for the node), so the rule and the nodes always line up.
What happens in right-to-left?
The list follows the page direction: Year 1 starts at the end side and the years run towards the start, as a written timeline does, and the vertical rule on a phone sits at the start side. Each wordmark keeps its own direction, as a logo would.