Staaarter

Dev Log Feed

A centered, timeline-style feed of development log entries leading up to launch, each showing a date, a title, a short description of what shipped, and an optional tag badge (Feature, Performance, Design, Milestone). Good for a transparent build-in-public changelog ahead of release.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/dev-log-feed.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon10.tsx instead.

Usage

The file also exports comingsoon10Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon10, comingsoon10Demo } from "@/components/blocks/coming-soon/comingsoon10";

export default function Page() {
  return <ComingSoon10 {...comingsoon10Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Dev log"Section heading.
descriptionstring"Following along with what we're building..."Section subheading.
entriesDevLogEntry[]noneLog entries to render, most-recent-first order is the caller's responsibility.
classNamestringnoneExtra classes for the outer section element.

Types

export interface DevLogEntry {
  id: string;
  date: string;
  title: string;
  description: string;
  tag?: string;
}

Behavior notes

  • Fully static: a plain Server Component rendering a fixed list. Dates are pre-formatted strings supplied via props, not computed with `Date` at render time, and the timeline dot/line is pure CSS.