UI Skillbook
2

Timeline

A vertical list of events in time order with coloured or icon markers and an optional now line.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-timeline and follow the Siteplane Timeline skill it prints for this task.

Paste this into your agent.

Timeline presents activity feeds, deploy histories, audit logs and a day's appointments. Events animate in and out as the list changes, and a now marker can sit between past and upcoming items.

Install

bashnpx shadcn@4.18.0 add @siteplane/timeline

Import it from @/siteplane/components/timeline. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Stepper: Pick Stepper when the items are steps a person works through, not events that happened.
  • vs Resource List: Pick Resource List when order in time is not the point and each row is an entity.

Rules

  • Render each TimelineItem directly inside Timeline, not inside a fragment, with TimelineTitle and TimelineDescription.
  • Set tone for status colour and keep the status in text as well.
  • Pass an icon as marker, and add markerLabel only when the marker says something the text does not.
  • Use TimelineNow between events to mark the present, passing label in the page language.
  • Wrap timestamps in time elements with a machine-readable dateTime, and supply events already sorted.

Reference

  • Timeline docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-timeline

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Banner Designby nextlevelbuilder

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

VisualExternalGitHub stars: 142.5K

Beautiful Shadowsby MengTo

Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.

VisualExternalGitHub stars: 7.1K

Bencium Innovative Ux Designerby bencium

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

VisualExternalGitHub stars: 470

Back to Siteplane UI