Service Bento With Figure

Bento4: Service Bento With Figure

A service page compressed into one mosaic. The lead tile floats a media piece over a dotted field between its own eyebrow and statement, and the tiles around it carry a photograph captioned on its scrim, one inverted figure and three icon services.

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

Base UI flavor

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

This installs the block to components/beste/block/bento4.tsx, the media10 photo piece it frames in the lead tile, and the badge7 eyebrow it uses.

Quick start

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

import { Bento4, bento4Demo } from "@/components/beste/block/bento4";

export default function Page() {
  return <Bento4 {...bento4Demo} />;
}

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

import { Compass, PenTool, Ruler } from "lucide-react";
import { Bento4 } from "@/components/beste/block/bento4";
import { Media10 } from "@/components/beste/piece/media10";

export default function Page() {
  return (
    <Bento4
      badge={{ label: "What the studio does" }}
      heading="Three services and one number that explains them."
      labels={{
        mediaEyebrow: "Off this week's roll",
        mediaTitle: "We photograph everything we make, then choose in the morning.",
      }}
      media={<Media10 photos={[{ src: "/roll/one.jpg", alt: "Specimen sheets" }]} />}
      image={{ src: "/studio/floor.jpg", alt: "Studio interior", caption: "Nine people, one floor" }}
      services={[
        { icon: Compass, title: "Direction", description: "Where the brand is going." },
        { icon: PenTool, title: "Identity", description: "The mark, the type and the grid." },
        { icon: Ruler, title: "Systems", description: "Components, templates and notes." },
      ]}
      figure={{ value: "84%", title: "Work still in use after five years" }}
    />
  );
}

Props

type ServiceTile = {
  icon: LucideIcon;
  title: string;
  description: string;
};

type PhotoTile = {
  src: string;
  alt: string;
  caption: string;
};

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

type Bento4Labels = {
  mediaEyebrow?: string;
  mediaTitle?: string;
};

Behavior notes

• media is a ReactNode, so any piece can sit in the lead tile: swap Media10 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, so the tile keeps one surface and the pattern follows the theme in light and dark.
• The lead tile spans md:col-span-4 md:row-span-2 and holds a min-h-[420px] below md, which gives the piece room before the grid takes over on desktop.
• The photograph captions itself on a gradient scrim instead of under the frame, so nothing reads as a caption stranded below an image when the mosaic stacks.
• 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.
• Service icons sit in a bg-background circle on the muted tile, which is what separates them from the surface without adding a border.
• Tiles fill six columns per row (4+2, 4+2, then 2+2+2), so three services plus the photograph and figure leave no gap at the end of a row.