Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Portfolio Projects Timeline Block for Vue

Eight freelance projects on a year rail with greyscale drawings and technology badges, and a toggle that swaps in a table of technologies by year with counts, plus the most used technology.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a body of work two ways with this portfolio projects timeline for Vue with Ark UI. It is written for Folioline, a fictional project-history tool. A hairline frame with a plus mark on each corner holds a toggle, By project or By technology, and the line "Most used: TypeScript, 6 projects" derived from the data. By project is a vertical rail with a year marker, a small greyscale drawing, the title, the kind of client and the technologies as badges for each of eight projects from 2022 to 2026. By technology swaps it for a table with one row for each technology and one cell for each year, each cell counting the projects that used it that year and tinted by the count. Both views are drawn in the same space, so the panel does not change height. It is built from Toggle Group, Badge and Guides with CSS and SVG for the drawings. For freelancers, studios and any record that reads differently by a second field. The projects are example data.

FAQ

How do I change the projects?

Edit PROJECTS at the top of the file: a title, a client description, a year, a list of technologies and a list of drawing rectangles. Add any new technology to TECHS so it gets a row in the table. The counts, the totals and the most used technology are derived.

How are the drawings made?

Each is a list of rectangles written as "x,y,w,h,tone" on a 64 by 48 sheet, drawn as an SVG with foreground tints. They are placeholders for a real preview: swap the Thumb component for your own image.

What stays in the page?

The lens. Nothing is saved or sent. To make it real, load the projects from your CMS and keep the same derivations for the table.

Does the panel change height when I switch lens?

No. Both views are drawn in the same grid cell and the one you are not looking at is hidden and inert, so the panel keeps the height of the taller one.

Is it accessible?

The drawings are decorative. The table has a caption, column headers for the years and row headers for the technologies, and zero counts are shown as a dash. The toggle is named, and a polite status line says which lens is showing.

How does it look on a phone?

The rail keeps the year and the dots at the start with the drawing beside each title, and the badges wrap. The table fits at 320 pixels with narrow year columns.

All 100 timeline blocks