Object Study BentoPRO

Bento6: Object Study Bento

A product study hung as a mosaic. One large photograph carries the object and its shot note, a tall ruled tile lists the measured specifications, two square macro crops sit underneath, and a single inverted figure closes the grid.

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

Base UI flavor

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

This installs the block to components/beste/block/bento6.tsx plus the badge7 eyebrow it uses.

Quick start

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

import { Bento6, bento6Demo } from "@/components/beste/block/bento6";

export default function Page() {
  return <Bento6 {...bento6Demo} />;
}

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

import { Bento6 } from "@/components/beste/block/bento6";

export default function Page() {
  return (
    <Bento6
      badge={{ label: "Object study" }}
      heading="Every surface, photographed before it was described."
      image={{
        src: "/object/pair.jpg",
        alt: "Headphones on a matte desk",
        title: "Reference pair, unopened",
        meta: "Shot on the bench it was assembled on",
      }}
      labels={{ specsTitle: "Measured" }}
      details={[
        { src: "/object/edge.jpg", alt: "Brushed aluminium edge", caption: "Brushed edge, unpolished" },
        { src: "/object/shell.jpg", alt: "Matte material macro", caption: "Matte shell, close" },
      ]}
      specs={[
        { title: "Weight", value: "268 g" },
        { title: "Materials", value: "Aluminium, wool" },
      ]}
      figure={{ value: "9", title: "Parts in the housing, down from 21" }}
    />
  );
}

Props

type HeroTile = {
  src: string;
  alt: string;
  title: string;
  meta: string;
};

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

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

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

type Bento6Labels = {
  specsTitle?: string;
};

Behavior notes

• The lead photograph spans md:col-span-4 md:row-span-2 and the specification tile spans md:col-span-2 md:row-span-2 beside it, so the two tallest tiles share the first band and the crops fill the row below.
• Specifications render as a real dl with dt and dd, and each row is separated by border-t border-current/10 rather than a boxed table, which keeps the tile on one surface.
• Rows use items-baseline justify-between, so a long material list and a short weight still sit on the same baseline with the value flush right.
• Every caption lives inside its picture on a gradient scrim, so nothing is stranded under an image when the mosaic collapses to one column.
• Detail crops carry aspect-square below md and switch to md:aspect-auto, letting md:auto-rows-[minmax(13rem,auto)] set their height on desktop instead of the image ratio.
• Only the figure tile is inverted, giving the section exactly one dark anchor; its text-background tokens are hardcoded because that surface is fixed rather than adaptive.
• Two detail crops plus the figure fill the second band exactly (2+2+2), so the demo shape leaves no gap at the end of a row.