We sit with your team, your data, and your doubts until the real problem stops hiding behind the brief.
Every idea gets pinned to one sentence. If it cannot survive that sentence, it does not make the cut.
Type, motion, and code grow in the same room — no handoff gap, no surprises waiting at the end.
We ship in daylight, watch the first week closely, and leave you a system you can run without us.
Week 01 → Launch
A connected left-to-right sequence of numbered project phases with a ruled timeline and step dots.
A four-up ruled timeline of numbered project phases, each with a step number, title, and description, closing with a small caption under the row that frames the timeline's span.
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/agency22?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/agency22?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/agency22.tsx, the badge7 component it uses for the eyebrow, the button12 component it uses for the CTA, and its dependencies.
The installed file exports agency22Demo alongside the block: the exact props behind the preview above. Spread it to get a working timeline section in one line.
import { Agency22, agency22Demo } from "@/components/beste/block/agency22";
export default function ProcessPage() {
return <Agency22 {...agency22Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Agency22 } from "@/components/beste/block/agency22";
export default function ProcessPage() {
return (
<Agency22
badge={{ label: "The method" }}
heading="How a project actually moves."
button={{ label: "Map the work", href: "https://beste.co" }}
labels={{ timeline: "Week 01 → Launch" }}
phases={[
{ step: "01", title: "Listen", description: "We sit with your team until the real problem surfaces." },
{ step: "02", title: "Frame", description: "Every idea gets pinned to one sentence." },
{ step: "03", title: "Make", description: "Type, motion, and code grow in the same room." },
{ step: "04", title: "Land", description: "We ship in daylight and watch the first week closely." },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Eyebrow rendered in Badge7; hidden entirely when omitted |
heading | string | – | Section heading, rendered with dangerouslySetInnerHTML |
button | ActionButton | – | CTA at the header's right edge; hidden entirely when omitted |
labels | { timeline: string } | – | Caption shown under the phase row |
phases | Phase[] | [] | Timeline steps; the whole timeline block is skipped when empty |
className | string | – | Extra classes for the outer <section> |
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type Phase = { step: string; title: string; description: string };heading supports inline <strong> highlighting via dangerouslySetInnerHTML, styled in text-muted-foreground rather than text-primary.justify-between), not centered like several other blocks in this set.lg:grid-cols-4 regardless of phases.length; it does not compute column count dynamically, so five or more phases will wrap to a second row of four rather than reflowing to three columns.border-t) rather than a connecting line or dot, giving the "timeline" a ruled, editorial look instead of a literal line-and-node diagram.labels.timeline renders as a plain caption below the phase grid and is optional; omitting labels entirely is safe since it is read with labels?.timeline.agency23
A services section with an eyebrow over a hairline rule, a two-column heading, and an editorial list of monospace-numbered service rows split into title and description.