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.
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.
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/feature266?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature266?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/feature266.tsx, the stats17 before-and-after piece it floats on the tile (installed to components/beste/piece/stats17.tsx), and the badge23 component it uses for the eyebrow.
The installed file exports feature266Demo alongside the block: the exact props behind the preview above. Spread it to get a working feature in one line.
import { Feature266, feature266Demo } from "@/components/beste/block/feature266";
export default function Page() {
return <Feature266 {...feature266Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Feature266 } from "@/components/beste/block/feature266";
import { Stats17 } from "@/components/beste/piece/stats17";
export default function Page() {
return (
<Feature266
badge={{ label: "Measured, not claimed" }}
heading="Four numbers we are willing to be held to"
description="Each of these comes from practices running it today, and each one has a method."
rows={[
{
value: "18 min",
title: "saved on every intake",
description: "Forms arrive filled in and nobody retypes an address already on file.",
source: "Median across 11 practices, first quarter after switching",
},
{
value: "38%",
title: "lower software spend",
description: "Scheduling, records, messaging, and billing arrive together.",
source: "Compared against the tools each practice retired",
},
]}
media={
<Stats17
title="Time to first booking"
before={{ label: "Before", value: "9 days", caption: "across three systems" }}
after={{ label: "After", value: "4 hours", caption: "on one workspace" }}
footnote="Median across eleven practices that switched last quarter."
/>
}
image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow at the very top, above the tile |
heading | string | – | Section heading, below the tile |
description | string | – | Supporting paragraph, right-aligned from md up |
rows | FigureRow[] | [] | Evidence rows, figure on the left and method on the right |
media | ReactNode | – | Live asset on the tile, stats17 in the demo |
image | { src: string; alt: string } | – | Backdrop behind the media tile |
className | string | – | Extra classes for the outer section |
type FigureRow = {
value: string;
title: string;
description: string;
source: string;
};
type TileImage = {
src: string;
alt: string;
};source is a required field on every row, not an optional one. The block is built around publishing the method next to the number, so a row cannot quietly omit it.1fr to 2fr split from md, giving the explanation twice the width of the figure. Below md they stack, with the figure and its title first.value and title are a pair meant to read as one sentence, the figure and then its unit clause, which is why title is lowercase in the demo copy.border-t with last:border-b, so the evidence table closes at the bottom.h-72, then md:h-96, tall enough that the before-and-after card has room to breathe without the tile dominating the section above the heading.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.
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.
feature232
Ruled feature rows that pair a large figure with a title and supporting copy, framing each capability by the number it earns.
feature263
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.