Annotated Centerpiece shadcn/tailwind block

About this block

Annotated CenterpiecePRO

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.

Feature256: Annotated Centerpiece

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.

Upgrade Now

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

bash

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

Base UI flavor

bash

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.

Quick start

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.

tsx

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:

tsx

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" }}
    />
  );
}

Props

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;
};

Behavior notes

The split is positional and hard-capped: 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 flips by breakpoint. The tile is 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.
Left-hand callouts are right-aligned from 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.
The grid is a 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.
Icons are passed as components, not names. Import the 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.
Callout titles render as h3 under the section h2, so the annotations stay part of the document outline.

More Feature blocks

View all Feature

PRO

feature228

Annotated core layout

PRO

feature130

Centered Stats with Large Typography

PRO

feature267

Annotated Centerpiece

Everything the morning huddle needs, on one screen

Schedule pressure

Only real alerts

Notes where they belong

Money in the same view