Day Timeline Rows

One Tuesday

A whole clinic day, and nobody opened a spreadsheet

This is not a feature list. It is the order things actually happen in on a normal day at a four-room practice.

07:40

The day loads itself

Rooms, clinicians, and the waiting list are already reconciled, so the huddle starts on decisions rather than on assembling a list.

09:15

A cancellation fills in eleven minutes

The slot goes back to the waiting list automatically and the first person who confirms takes it.

11:30

Notes land in the record, not the inbox

Handover happens where the care happened, so the afternoon clinician reads context instead of chasing it.

14:05

A locum asks for records access

The request goes to the lead who owns the record, gets a yes in one tap, and writes itself into the audit log.

Soft blue gradient backdrop

Access request

Priya Nandan needs today's clinic list

17:30

Invoices are already raised

Every appointment that happened has a charge against it, so the end of the month is a review rather than a rebuild.

Nothing above is a workflow anyone configured. It is what the product does when you simply use it.

About this block

Day Timeline RowsPRO

A feature that walks through one working day as hairline rows stamped with the time of day, with a live approval asset dropped inline on the entry that needs showing rather than telling.

Feature263: Day Timeline Rows

A feature that walks through one working day as hairline rows stamped with the time of day, with a live approval asset dropped inline on the entry that needs showing rather than telling.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash
npx shadcn add "https://ui.beste.co/r/feature263?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash
npx shadcn add "https://ui.beste.co/r-base/feature263?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature263.tsx, the notification20 approval piece it drops inline on one entry (installed to components/beste/piece/notification20.tsx), and the badge23 component it uses for the eyebrow.

Quick start

The installed file exports feature263Demo alongside the block: the exact props behind the preview above. Spread it to get a working timeline in one line.

tsx
import { Feature263, feature263Demo } from "@/components/beste/block/feature263";

export default function Page() {
  return <Feature263 {...feature263Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx
import { CalendarCheck } from "lucide-react";
import { Feature263 } from "@/components/beste/block/feature263";
import { Notification20 } from "@/components/beste/piece/notification20";

export default function Page() {
  return (
    <Feature263
      badge={{ label: "One Tuesday" }}
      heading="A whole clinic day, and nobody opened a spreadsheet"
      description="Not a feature list. The order things actually happen in on a normal day."
      entries={[
        {
          time: "07:40",
          title: "The day loads itself",
          description: "Rooms, clinicians, and the waiting list are already reconciled.",
        },
        {
          time: "14:05",
          title: "A locum asks for records access",
          description: "The request goes to the lead who owns the record and writes itself into the audit log.",
          media: (
            <Notification20
              icon={CalendarCheck}
              title="Access request"
              meta="Priya Nandan needs today's clinic list"
              primaryLabel="Approve"
              secondaryLabel="Decline"
            />
          ),
          image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
        },
      ]}
      closing="Nothing above is a workflow anyone configured."
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }–Eyebrow above the hairline rule, rendered through Badge23
headingstring–Section heading in the left column of the header
descriptionstring–Supporting paragraph, right-aligned from md up
entriesTimelineEntry[][]Timeline rows in the order they should be read
closingstring–Paragraph under the last row, outside the hairlines
classNamestring–Extra classes for the outer section
ts
type TimelineEntry = {
  time: string;
  title: string;
  description: string;
  media?: ReactNode;
  image?: TileImage;
};

type TileImage = {
  src: string;
  alt: string;
};

Behavior notes

  • media is optional per entry, and that is the whole design of the block: most rows are text, and the one or two that need proof carry an asset. Giving every row an asset flattens the emphasis the layout is built around.
  • The inline tile is deliberately small, h-44 then md:h-48, and capped at max-w-md. It sits inside the row's text column rather than beside it, so the timeline reads as one continuous column.
  • time is copy, not a parsed value. Any format works, and the block never sorts or reorders entries, so the array order is the reading order.
  • The time column is a fixed 6rem grid track from md up. Below md the grid collapses to one column and the time stacks above the title instead of beside it.
  • Rows use border-t with last:border-b, so the timeline closes at the bottom rather than trailing off.
  • closing sits outside the hairline block with its own top margin, which is what keeps it reading as an author's note rather than as a final row.

More Feature blocks

View all Feature
PRO

feature262

Expanding Proof Rows

A feature of full-width hairline rows that expand in place, revealing a paragraph beside an image tile that floats a different live asset for each way of evaluating the product.

PRO

feature266

Figure-Led Evidence Rows

A feature that opens on a tall image tile floating a live before-and-after card, then sets out its evidence as hairline rows leading on an oversized light figure paired with an explanation and the method behind it.

PRO

feature232

Stat-backed feature rows

Ruled feature rows that pair a large figure with a title and supporting copy, framing each capability by the number it earns.

PRO

feature248

Alternating Proof Rows

Feature rows that alternate the image side on every second entry, each pairing an eyebrow, display title and explanation with one oversized outcome figure on its own rule, headed by an outline pill CTA pinned to the top right.

PRO

feature254

Photographic Year Ledger

Timeline where every ruled row lines up a year, a photograph from that moment and the explanation of what forced the change, headed by a pill CTA on the heading line and stacking to a readable block on mobile.

PRO

feature267

Center-Line Journey Timeline

A feature that runs a hairline down the middle of the section and alternates its stages either side of it, dropping an image tile with a live phone frame onto the step worth showing.