Staaarter

Day in the Life Timeline

A timestamped timeline walking through a typical workday, from standup to wrap-up, each entry paired with a lucide icon and a short description. Gives candidates a concrete sense of daily rhythm rather than an abstract culture pitch.

By Staaarter Team
Careers
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/day-in-the-life-timeline.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/careers/careers15.tsx instead.

Usage

The file also exports careers15Demo, 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 { Careers15, careers15Demo } from "@/components/blocks/careers/careers15";

export default function Page() {
  return <Careers15 {...careers15Demo} />;
}

Props

PropTypeDefaultDescription
headingstringnoneSection heading above the timeline.
subheadingstringnoneShort supporting line under the heading.
entriesDayEntry[]noneOrdered list of timestamped entries for the day.
classNamestringnoneExtra classes for the outer section element.

Types

interface DayEntry {
  time: string;
  title: string;
  description: string;
  icon: "standup" | "focus" | "lunch" | "pairing" | "wrapup";
}

Behavior notes

  • Fully static. Times are fixed plain strings (e.g. "9:00 AM") in the demo data, not computed from the current clock, so this renders identically on server and client.
  • Icons are chosen by a fixed internal mapping from the icon key to a lucide-react icon, so this stays a plain Server Component.