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

PRO

bento13

Onboarding Mosaic

PRO

bento11

Evidence Mosaic

What changes, measured rather than promised

Where a normal week actually goes

How we count