Evidence Mosaic shadcn/tailwind block

About this block

Evidence MosaicPRO

A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card, and a soft note on method.

Bento12: Evidence Mosaic

A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card and a soft note on method.

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

Base UI flavor

bash

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

This installs the block to components/beste/block/bento12.tsx, the chart7 and socialproof26 pieces it floats on two of the tiles (installed to components/beste/piece/{name}.tsx), and the badge23 component it uses for the eyebrow.

Quick start

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

tsx

import { Bento12, bento12Demo } from "@/components/beste/block/bento12";

export default function Page() {
  return <Bento12 {...bento12Demo} />;
}

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

tsx

import { Bento12 } from "@/components/beste/block/bento12";
import { Chart7 } from "@/components/beste/piece/chart7";
import { Socialproof26 } from "@/components/beste/piece/socialproof26";

export default function Page() {
  return (
    <Bento12
      badge={{ label: "Evidence" }}
      heading="What changes, measured rather than promised"
      description="Every tile here comes from practices running it today."
      figures={[
        {
          value: "18 min",
          title: "saved on every intake",
          description: "Median across eleven practices in their first quarter.",
        },
        {
          value: "38%",
          title: "lower software spend",
          description: "Measured against the tools each practice retired.",
        },
        {
          value: "4 hrs",
          title: "to the first live clinic",
          description: "Mean time from signature to a real booking.",
        },
      ]}
      chart={{
        kicker: "Utilisation",
        title: "Where a normal week actually goes",
        media: (
          <Chart7
            title="Where the week went"
            caption="Booked hours by appointment type"
            items={[{ label: "Consultations", percent: 42 }]}
          />
        ),
        image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
      }}
      quote={{
        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" }}
          />
        ),
      }}
      note={{
        title: "How we count",
        description: "Every figure on this page has a written method.",
      }}
    />
  );
}

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`
`figures`	`FigureTile[]`	`[]`	Figure tiles across the top row, the first one inverted
`chart`	`AssetTile`	–	Tall card with a live asset and a caption block
`quote`	`QuoteTile`	–	Tile holding a quote card, with no copy of its own
`note`	`NoteTile`	–	Soft tile carrying the method note
`className`	`string`	–	Extra classes for the outer `section`

type TileImage = {
  src: string;
  alt: string;
};

type FigureTile = {
  value: string;
  title: string;
  description: string;
};

type AssetTile = {
  kicker: string;
  title: string;
  media: ReactNode;
  image?: TileImage;
};

type QuoteTile = {
  media: ReactNode;
  image?: TileImage;
};

type NoteTile = {
  title: string;
  description: string;
};

Behavior notes

The first figure inverts by index, not by a flag: index === 0 switches the tile to bg-foreground and swaps every text token inside it to a fixed background value. Reordering figures moves the emphasis.
Each figure spans two of six columns, so three figures fill the first row exactly. A fourth pushes into the next row and breaks the alignment with the chart card, which assumes it starts on row two.
The chart card is col-span-4 row-span-2 and its tile is md:h-auto md:flex-1, so the tile absorbs the extra height of the two-row span rather than leaving a gap under the caption.
quote carries no copy of its own by design. It is a bare tile whose entire content is the piece, which is what lets the testimonial keep its own card styling inside the mosaic.
Tiles use three distinct surfaces on purpose: bg-card with a border for evidence, bg-foreground for the lead figure, and bg-muted for the quote and the note.
Below md all spans collapse and tiles stack in source order: figures, chart, quote, note.

More Bento blocks

View all Bento

PRO

bento15

Practice Bento

One mosaic of six tiles: a large photograph that drifts inside its tile, an ink quote tile with film grain, a serif figure that counts up, a small photograph, an hours sheet and a call-to-action tile with a sliding-marker pill, each rising into view in turn.

PRO

bento13

Onboarding Mosaic

A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile, and a capture card holding a working email row.

PRO

bento11

Product Surface Mosaic

A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list, and a captioned photograph.

PRO

bento3

Selected Work Bento

Work mosaic on a six-column track mixing photographic tiles that carry their caption inside on a gradient scrim with a soft statement tile and an inverted figure tile, the lead project spanning four columns and two rows.

PRO

bento6

Object Study Bento

Product mosaic pairing a two-row hero photograph captioned on its scrim with a tall specification tile, then two square macro tiles that carry their caption inside and an inverted figure tile closing the row.

PRO

bento14

Publication Hub Mosaic

A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.