Studio Bento Grid

Bento1: Studio Bento Grid

A monochrome bento grid that lays a badge, heading, and description over a six-column tiled composition of five optional cards: a large statement anchor, an inverted stat figure, a framed cover image with a gradient scrim, an editorial pull-quote, and an always-present closing CTA card with a linked button.

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

Base UI flavor

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

This installs the block to components/beste/block/bento1.tsx.

Quick start

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

import { Bento1, bento1Demo } from "@/components/beste/block/bento1";

export default function Page() {
  return <Bento1 {...bento1Demo} />;
}

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

import { Bento1 } from "@/components/beste/block/bento1";

export default function Page() {
  return (
    <Bento1
      badge={{ label: "At a glance" }}
      heading="The studio, in one grid."
      description="A snapshot of how the studio works."
      statement={{
        index: "S/01",
        title: "We make monochrome feel loud.",
        body: "Systems built from type, contrast, and restraint.",
      }}
      stat={{ value: "138", label: "Launches shipped", caption: "Since 2014" }}
      image={{
        src: "/studio.jpg",
        alt: "Studio table layered with printed type specimens",
        caption: "Inside the type room",
      }}
      quote={{
        quote: "They kept cutting until only the idea was left standing.",
        author: "Mara Vance",
        role: "Founder, Halden Press",
      }}
      button={{ label: "Tour the studio", href: "/about" }}
      labels={{
        ctaTitle: "Want the long version?",
        ctaNote: "A 30-minute walkthrough of the whole practice.",
      }}
    />
  );
}

Props

type StatementCard = {
  index: string;
  title: string;
  body: string;
};

type StatCard = {
  value: string;
  label: string;
  caption: string;
};

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

type QuoteCard = {
  quote: string;
  author: string;
  role: string;
};

type ActionButton = {
  label: string;
  href: string;
};

type Bento1Labels = {
  ctaTitle: string;
  ctaNote: string;
};

Behavior notes

• The five content cards (statement, stat, image, quote, plus the intro badge, heading, and description) each render only when their prop is present, so the grid gracefully collapses around whatever you omit.
• The closing CTA <article> is always rendered regardless of props; only its inner heading and note depend on labels, and its Button12 depends on button, so an empty CTA card can still appear if you pass neither.
• There are no event callbacks: the CTA is a real navigation via Button12 asChild wrapping a Next.js <Link href={button.href} />, so it always points at a URL rather than firing a handler.
• Layout is a fixed md:grid-cols-6 composition with hardcoded spans: statement takes four columns and two rows, stat and image take two columns each, and both quote and the CTA take three columns; the row template pins minmax(220px,auto) heights.
• The stat card inverts colors on a bg-foreground surface with text-background figures, and the image card renders a plain <img> absolutely positioned under a from-foreground/70 gradient with the caption pinned bottom-left.
• No inline markup is parsed: heading, statement.title, and the quote are rendered as plain text, and the quote footer joins author and role with a literal separator, so passing HTML strings will show as escaped text.
• The image element carries a transition-transform duration-500 class but no accompanying hover-scale utility, so the transition is decorative and produces no visible motion on its own.