Is This You

Usecase55: Is This You

A recognition checklist: a sticky column of heading, intro and pill beside ticked statements set at serif size, closed by a line that names what recognising them means.

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/usecase55?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/usecase55.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Usecase55, usecase55Demo } from "@/components/beste/block/usecase55";

export default function Page() {
  return <Usecase55 {...usecase55Demo} />;
}

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

import { Usecase55 } from "@/components/beste/block/usecase55";

export default function Page() {
  return (
    <Usecase55
      eyebrow="Is this you"
      heading="If three of these sound familiar, it is probably time."
      description="None of them is a crisis. Together they are a pattern."
      button={{ label: "Talk it through", href: "/call", tone: "dark" }}
      statements={[
        "You are fine, and you keep saying so.",
        "Sleep comes late and leaves early.",
        "Rest feels like something you have to earn.",
      ]}
      closing="Recognising the pattern is most of the first session." 
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The statements are set at serif display size rather than as a list of body-copy bullets, because each one is meant to be read as a sentence about the reader rather than skimmed as a feature.
• The list is an ol, so the order is real; the ticks are decorative marks inside it rather than checkboxes, since nothing here is interactive.
• Every statement shares one flat 0.1s delay rather than a growing stagger, so a list of six does not leave the last line arriving seconds after the reader gets there.
• Rows use a tighter -15% viewport margin than the header, so a statement settles once it is properly inside the reading area.
• The tick sits in a bordered size-7 circle with shrink-0 and a mt-1 nudge, so a statement that wraps keeps its mark on the first line.
• The left column is md:sticky md:top-28 and returns to normal flow below md, where a sticky column would cover the list.
• closing sits outside the ruled list, so the section ends on a sentence rather than on another rule.