Honest Comparison

Feature288: Honest Comparison

An honest two-column comparison: your side on the ink surface and theirs on a muted panel, each line ticked or dashed, with a pill centred underneath.

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

Base UI flavor

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

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

Quick start

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

import { Feature288, feature288Demo } from "@/components/beste/block/feature288";

export default function Page() {
  return <Feature288 {...feature288Demo} />;
}

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

import { Feature288 } from "@/components/beste/block/feature288";

export default function Page() {
  return (
    <Feature288
      eyebrow="The honest comparison"
      heading="What a small practice can do that a large one cannot."
      description="We are not the cheapest, the biggest or the fastest."
      button={{ label: "Decide for yourself, on a call", href: "/call", tone: "dark" }}
      us={{
        title: "Altair",
        points: [
          { label: "The same practitioner every session", included: true },
          { label: "Same-day booking", included: false },
        ],
      }}
      them={{
        title: "A large platform",
        points: [
          { label: "The same practitioner every session", included: false },
          { label: "Same-day booking", included: true },
        ],
      }}
    />
  );
}

Props

type Column = {
  title: string;
  points: { label: string; included: boolean }[];
};

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

Behavior notes

• The two columns hold their own point lists rather than sharing one row set, so they do not have to be the same length or in the same order; keeping the labels aligned is deliberate editing rather than something the block enforces.
• A missing point is a dash, not a cross. The mark is Minus and the label drops to a muted tone, which states the difference without scoring a point against anyone.
• included: false is honest in both directions: the demo gives the featured column a false of its own, and the block draws it exactly the same way, so a fair comparison is the default shape rather than an unusual one.
• The featured column is a fixed dark surface, so its dividers and muted text are written against background tokens rather than the adaptive ones the muted column uses.
• Points enter with a 0.06s stagger, tight enough that a six-line column reads as one list rather than as six arrivals.
• The section heading is centred while both lists are left aligned, which keeps a column of comparable lines scannable.
• Either column may be omitted, in which case the remaining one takes half the grid rather than stretching.