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.
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.
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/feature262?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature262?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/feature262.tsx, the browser34, dashboard33 and socialproof26 pieces it reveals one per row (installed to components/beste/piece/{name}.tsx), and the badge23 component it uses for the eyebrow.
The installed file exports feature262Demo alongside the block: the exact props behind the preview above. Spread it to get a working set of rows in one line.
import { Feature262, feature262Demo } from "@/components/beste/block/feature262";
export default function Page() {
return <Feature262 {...feature262Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Browser34 } from "@/components/beste/piece/browser34";
import { Feature262 } from "@/components/beste/block/feature262";
import { Socialproof26 } from "@/components/beste/piece/socialproof26";
export default function Page() {
return (
<Feature262
badge={{ label: "Three ways to check" }}
heading="Look at it however you usually decide"
description="Some people want to see it working, some want to hear from a practice like theirs, and some only trust the numbers."
items={[
{
kicker: "Look",
title: "See the workspace itself, not a slide of it",
description: "The member list your team would open first, with real statuses on it.",
media: (
<Browser34
url="app.example.com/members"
rows={[{ name: "Rowan Blake", status: "Active", tone: "emerald" }]}
/>
),
image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
},
{
kicker: "Ask",
title: "Hear it from a practice that already moved",
description: "They will tell you what went wrong as readily as what went right.",
media: (
<Socialproof26
quote="We moved eleven years of records over a weekend."
name="Elena Rourke"
role="Practice lead, Bramble Health"
avatar={{ src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" }}
/>
),
image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
items | RevealRow[] | [] | Expanding rows, the first one starts open |
className | string | – | Extra classes for the outer section |
type RevealRow = {
kicker: string;
title: string;
description: string;
media: ReactNode;
image?: TileImage;
};
type TileImage = {
src: string;
alt: string;
};openIndex starts at 0, and clicking the open row sets it to -1, so every row can be closed and the section collapses to a plain list of hairlines.button with aria-expanded, and carries cursor-pointer explicitly, since Tailwind v4 buttons default to cursor: default.aria-hidden span. The open state is announced through aria-expanded, so the icon is decoration rather than the only signal.md:pl-[8.5rem] to clear the w-24 kicker column plus its gap-10, which lines the paragraph up under the row title rather than under the kicker. Below md the indent drops and the panel runs full width.border-t with last:border-b, closing the list at the bottom.media is required on every row while image is optional, so a row can float its asset on the plain muted tile with no photograph behind it.feature266
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.
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.
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.