Timeline blocks for every framework.

They are 100 React timeline blocks, in 14 groups: rails and connectors, layouts and spines, time lenses, horizontal axes, lanes and plans, nested and interactive lists, media and data, developer logs, trust and operations, money and accounts, travel and orders, everyday records, projects and milestones, people and threads. They lay dated events on a rail or an axis, from a plain vertical list to a Gantt-style chart.

Vertical Dots Timeline is a rail of steps with done, current and upcoming states, Alternating Cards Timeline puts events on both sides of a spine, and Centered Spine Timeline runs a thick spine down the centre with decisions on one side and outcomes on the other. Horizontal Scroll Timeline runs a line from side to side, and Gantt Inspired Timeline draws bars on a proportional time axis.

Changelog Timeline and Commit Log Timeline suit release and code history, Product Roadmap Timeline lays a plan against dates, Order Tracking Timeline shows a parcel's milestones, and Work Experience Timeline fits a career history.

The events are typed data at the top of the file, usually an id, an ISO date, a title and a note, and the sums, gaps and counts shown are computed from them. The companies and events are invented.

Replace the typed events list with your own, sorted in the order the block draws them, and render the block with it. Several blocks measure from a fixed "now" typed in the file, for example a Wednesday in October, so the demo never goes stale. In your app replace that constant with the current date.

Order Tracking Timeline draws five milestones, solid up to the one reached and dashed after it, and a Show every scan switch opens the carrier scans between them. Map your carrier's events onto the milestones and keep Not yet for steps with no event. The demo fetches nothing.

Filterable Timeline puts a two-thumb range slider over weekly bars and lists only the alerts inside the range, newest first, in a scroll region of fixed height. Searchable Timeline instead keeps every event and marks the matching words, stepping through the matches. Filter your own events by the same range and keep the count that says how many are shown.

Gantt Inspired Timeline starts and ends each bar on its dates and fills the part that is done, with a hairline at today. A Week, Fortnight and Month toggle changes the axis labels and the width of the chart, and each bar opens the task's owner, dates and dependencies. Supply tasks with start and end dates and the bars follow.

Vertical rails position their dots with logical properties and flip in a right-to-left layout. The blocks with a time axis from side to side, such as Horizontal Scroll Timeline and Gantt Inspired Timeline, deliberately do not mirror in Arabic or Hebrew, because time still runs the same way there.

This page lists 100 of the category's 100 timeline blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The timeline blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/timeline-activity-feed.json). The other bases are one picker away from /timeline-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/timeline-activity-feed.json for Activity Feed Timeline. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Activity Feed Timeline brings Guides and Native Select, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of timeline block, led by rails and connectors (14), developer logs (9), people and threads (9) and layouts and spines (8), and sort by popular or name. A good first look: Activity Feed Timeline, Alternating Cards Timeline and Animated Pulse Timeline. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a timeline block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the rails and layouts, time and axes and lists and rich entries kinds.

Open its page and use the full-screen viewer (/view/timeline/activity-feed) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each timeline block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the timeline blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 timeline blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a timeline block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "timeline"` to search_blocks to search only the 100 timeline blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "timeline", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.