Studio Summary Bento

Bento2: Studio Summary Bento

A whole about page compressed into one screen. The lead tile frames a mood-board media piece between its own eyebrow and closing statement, and the tiles around it carry a photograph captioned on its scrim, one inverted figure, a quote and a bordered CTA. Nothing is captioned underneath a picture, so the grid holds together on a phone as well as on a desktop.

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

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

Base UI flavor

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

This installs the block to components/beste/block/bento2.tsx, the media22 mood-board piece it frames in the lead tile, and the badge7 and button12 components it uses.

Quick start

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

import { Bento2, bento2Demo } from "@/components/beste/block/bento2";

export default function Page() {
  return <Bento2 {...bento2Demo} />;
}

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

import { Bento2 } from "@/components/beste/block/bento2";
import { Media22 } from "@/components/beste/piece/media22";

export default function Page() {
  return (
    <Bento2
      badge={{ label: "The studio at a glance" }}
      heading="Nine people, one floor, no account managers."
      labels={{
        mediaEyebrow: "On the wall this week",
        mediaTitle: "Every project starts as a board before it starts as a file.",
      }}
      media={<Media22 label="Board 14" tiles={[{ src: "/board/one.jpg", alt: "Specimen" }]} />}
      image={{ src: "/studio/floor.jpg", alt: "Studio interior", caption: "Rotterdam, since 2016" }}
      figure={{ value: "72%", title: "Clients who come back" }}
      quote={{
        quote: "The only studio we have hired twice without running a pitch.",
        name: "Ines Volkert",
        role: "Head of Brand",
      }}
      cta={{ title: "Come and see the boards.", buttonLabel: "Meet the studio", href: "/studio" }}
    />
  );
}

Props

type PhotoTile = { src: string; alt: string; caption: string };
type FigureTile = { value: string; title: string };
type QuoteTile = { quote: string; name: string; role: string };
type CtaTile = { title: string; buttonLabel: string; href: string };
type Bento2Labels = { mediaEyebrow?: string; mediaTitle?: string };

Behavior notes

• media is a ReactNode, so any piece can sit in the lead tile: swap Media22 for a browser, editor or stats piece without touching the block.
• The area holding the piece is marked only by a dotted field, a radial-gradient on currentColor at text-foreground/20, with no second fill and no border: the tile keeps one surface and the pattern follows the theme in light and dark. The eyebrow above and the statement below sit on the plain part of the tile.
• The lead tile spans md:col-span-4 md:row-span-2 and the rows are md:auto-rows-[minmax(13rem,auto)], so tiles grow with their content instead of clipping it.
• Every caption lives inside its tile: the photograph carries its line on a gradient scrim rather than under the frame, which is what keeps the mosaic readable when it collapses to one column.
• Only the figure tile is inverted, so the section has exactly one dark anchor; it keeps hardcoded text-background tokens because that surface is fixed rather than adaptive.
• Tiles fill six columns per row (4+2, 4+2, 4+2), so removing one leaves the grid reflowing rather than leaving a gap at the end.
• Below md everything stacks in source order, with the lead tile holding a min-h-[420px] so the piece keeps room to breathe.