A feature that centers one image tile floating a live metrics panel and annotates it from both sides with four icon callouts that collapse under the tile on smaller screens.
A feature that centers one image tile floating a live metrics panel and annotates it from both sides with four icon callouts that collapse under the tile on smaller screens.
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/feature256?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature256?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/feature256.tsx, the dashboard33 metrics piece it floats on the tile (installed to components/beste/piece/dashboard33.tsx), and the badge23 component it uses for the eyebrow.
The installed file exports feature256Demo alongside the block: the exact props behind the preview above. Spread it to get a working feature in one line.
import { Feature256, feature256Demo } from "@/components/beste/block/feature256";
export default function Page() {
return <Feature256 {...feature256Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Bell, CalendarRange, FileText, Wallet } from "lucide-react";
import { Dashboard33 } from "@/components/beste/piece/dashboard33";
import { Feature256 } from "@/components/beste/block/feature256";
export default function Page() {
return (
<Feature256
badge={{ label: "The overview" }}
heading="Everything the morning huddle needs, on one screen"
description="Assembled from the same records your team already keeps, so the numbers never need a second opinion."
callouts={[
{
icon: CalendarRange,
title: "Schedule pressure",
description: "See how full the week is before anyone promises a slot that is not there.",
},
{
icon: Bell,
title: "Only real alerts",
description: "Cancellations and gaps surface, routine confirmations stay quiet.",
},
{
icon: FileText,
title: "Notes where they belong",
description: "Each figure links back to the record that produced it.",
},
{
icon: Wallet,
title: "Money in the same view",
description: "Outstanding invoices sit next to the clinics that generated them.",
},
]}
media={
<Dashboard33
title="This week"
range="Mon to Sun"
items={[
{ label: "Booked", value: "142", delta: "+9", direction: "up" },
{ label: "No-shows", value: "3", delta: "-4", direction: "down" },
]}
/>
}
image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Centered eyebrow above the heading, rendered through Badge23 |
heading | string | – | Section heading, centered and capped at max-w-2xl |
description | string | – | Centered supporting paragraph, capped at max-w-xl |
callouts | Callout[] | [] | Annotations, first two on the left and next two on the right |
media | ReactNode | – | Live asset on the centre tile, dashboard33 in the demo |
image | { src: string; alt: string } | – | Backdrop behind the media tile |
className | string | – | Extra classes for the outer section |
import type { LucideIcon } from "lucide-react";
type Callout = {
icon: LucideIcon;
title: string;
description: string;
};
type TileImage = {
src: string;
alt: string;
};callouts.slice(0, 2) fills the left column and slice(2, 4) fills the right. A fifth callout is accepted by the type but never rendered, so keep the array at four.order-1 below lg so the visual leads on mobile, and lg:order-2 so it sits between the two callout columns once there is room. The left column is order-2 on mobile and lg:order-1.lg up (lg:text-right) and their icon tiles are pushed over with lg:ml-auto, so both columns point inward at the tile. Below lg both columns are plain left-aligned two-up grids.1fr to 1.6fr to 1fr split with lg:items-center, which keeps the callouts vertically centered against the tile rather than aligned to its top edge.lucide-react icon and hand it over directly; the block renders it at size-5 inside a size-10 tinted tile and marks the tile aria-hidden, since the title beside it already carries the meaning.h3 under the section h2, so the annotations stay part of the document outline.feature228
A central core image framed by feature cards that each reference how a module connects back to the system's core.
feature130
Center-aligned large stat display with minimal spacing and minimal decoration. Perfect for impressive scaling statistics or key performance numbers.
feature267
A feature that runs a hairline down the middle of the section and alternates its stages either side of it, dropping an image tile with a live phone frame onto the step worth showing.
feature107
3-column grid of centered feature cards with large icons and brief descriptions. Perfect for capability highlights, service features, or platform offerings.