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.
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.
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
npx shadcn add "https://ui.beste.co/r/feature263?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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."
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
entries | TimelineEntry[] | [] | Timeline rows in the order they should be read |
closing | string | – | Paragraph under the last row, outside the hairlines |
className | string | – | Extra classes for the outer section |
type TimelineEntry = {
time: string;
title: string;
description: string;
media?: ReactNode;
image?: TileImage;
};
type TileImage = {
src: string;
alt: string;
};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.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.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.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.feature262
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.
feature266
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.
feature232
Ruled feature rows that pair a large figure with a title and supporting copy, framing each capability by the number it earns.
feature248
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.