Practice Bento

Bento15: Practice Bento

A practice summary as a bento grid: a tall photograph with a caption over its foot, a grain-textured quote panel, a figure that counts up, a small photo tile, an opening-hours list and a wide closing action, each tile arriving a beat after the last.

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

Base UI flavor

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

This installs the block to components/beste/block/bento15.tsx plus the button22 sliding-marker pill it uses.

Quick start

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

import { Bento15, bento15Demo } from "@/components/beste/block/bento15";

export default function Page() {
  return <Bento15 {...bento15Demo} />;
}

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

import { Bento15 } from "@/components/beste/block/bento15";

export default function Page() {
  return (
    <Bento15
      photo={{ src: "/rooms/bench.jpg", alt: "A sunlit room with a low timber bench", label: "The front room, afternoon" }}
      quote={{ text: "The quietest hour of my week.", name: "Sam Fender" }}
      figure={{ value: 91, suffix: "%", label: "Come back after session five" }}
      smallPhoto={{ src: "/rooms/ledge.jpg", alt: "A ceramic vessel on a plaster ledge" }}
      hours={{
        title: "Hours",
        rows: [
          { day: "Mon to Thu", hours: "9 to 21" },
          { day: "Friday", hours: "9 to 15, then the walk" },
        ],
      }}
      cta={{
        heading: "Start with a conversation, not a form.",
        description: "Twenty minutes, free, and no need to know what you want yet.",
        button: { label: "Book the call", href: "/call", tone: "dark" },
      }}
    />
  );
}

Props

type HourRow = {
  day: string;
  hours: string;
};

type Figure = {
  value: number;
  suffix?: string;
  label: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Every tile is optional and each keeps its own column span, so dropping one leaves a hole the grid closes by reflowing rather than by stretching a neighbour into an odd shape.
• Rows are fixed at 13rem from md up, which is what lets the tall photograph claim exactly two of them and stay in proportion with everything beside it. Below md the grid is a single column and the two photo tiles fall back to explicit min-h values.
• Both photo tiles are absolutely positioned inside their card and drift -8% to 8% against a 1.18 scale, so the picture moves while the tile's corners stay put.
• The grain overlay on the quote panel uses an feTurbulence filter with an id from useId, so two of these blocks on one page do not collide on a global SVG id and end up sharing one filter.
• The figure counts from zero when it reaches the viewport, is rounded on every frame, and prints in tabular-nums so the tile does not change width while the number climbs.
• Tiles enter with a 0.1s stagger by declaration order, so the grid resolves as a sequence rather than as one slab appearing at once.
• Opening hours are a real dl, with the day as dt and the hours as dd, so a screen reader keeps the two halves of each row together.