A Day In The ToolPRO

Usecase50: A Day In The Tool

A working day set as a ruled timetable. Pick an hour and the panel beside it shows the interface piece that was open at that moment, with the story and the outcome it produced.

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

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

Base UI flavor

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

This installs the block to components/beste/block/usecase50.tsx, the editor10, calendar11, upload23 and upload20 pieces the demo puts in the panel, and the badge7 eyebrow it uses.

Quick start

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

import { Usecase50, usecase50Demo } from "@/components/beste/block/usecase50";

export default function Page() {
  return <Usecase50 {...usecase50Demo} />;
}

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

import { Usecase50 } from "@/components/beste/block/usecase50";
import { Calendar11 } from "@/components/beste/piece/calendar11";
import { Editor10 } from "@/components/beste/piece/editor10";

export default function Page() {
  return (
    <Usecase50
      badge={{ label: "One ordinary Tuesday" }}
      heading="The same screen, four times in a working day."
      description="Pick an hour and see exactly what the studio was looking at."
      labels={{ scheduleTitle: "The hours" }}
      moments={[
        {
          time: "08:40",
          label: "The brief arrives already answered",
          title: "A brief that argues with itself before you do",
          description: "Clients fill the same short template overnight.",
          media: <Editor10 title="Catalogue, spring" code="brief.md" />,
          outcomeTitle: "Time to first call",
          outcome: "Down to one day",
        },
        {
          time: "10:15",
          label: "The week books itself",
          title: "Reviews land where the work already is",
          description: "One ninety-minute session a week, at the same hour.",
          media: <Calendar11 heading="Book the weekly review" date="Thursday, 14 March" />,
          outcomeTitle: "Sessions per project",
          outcome: "One a week, no more",
        },
      ]}
    />
  );
}

Props

type Moment = {
  time: string;
  label: string;
  title: string;
  description: string;
  /** Media object for this moment, usually a registry piece */
  media: ReactNode;
  outcomeTitle: string;
  outcome: string;
};

type Usecase50Labels = {
  scheduleTitle?: string;
};

Behavior notes

• media is a ReactNode per moment, so each hour can show a different piece: the demo runs an editor, a calendar, a single upload and an upload grid without the block knowing anything about them.
• The piece floats over a dotted field drawn on the panel's own surface, a radial-gradient on currentColor at text-foreground/20, with no second fill and no border, so the panel keeps one surface and the pattern follows the theme.
• Timetable rows are a grid-cols-[4.5rem_1fr] with tabular-nums on the time, so the hours form a straight column whatever the labels do.
• Selection is expressed twice: the row's top rule darkens from border-border to border-foreground and the label gains weight, so it does not rely on colour alone.
• The media area is flex-1 with min-h-[260px], so switching between a tall calendar and a short upload card does not make the panel jump.
• The outcome line sits on a border-current/10 rule with items-baseline justify-between, so the label and its value stay aligned and wrap cleanly when the panel is narrow.
• Below md the timetable stacks above the panel in source order, so a phone reads the day first and then the selected hour.