Bento

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add bento

Usage#

Anatomy#

import {
  Bento,
  BentoItem,
  BentoItemIcon,
  BentoItemTitle,
  BentoItemDescription,
  BentoItemImage,
  BentoItemArt,
  BentoItemMedia,
} from "@/components/ui/bento"

<Bento>
  <BentoItem>
    <BentoItemIcon />
    <BentoItemTitle />
    <BentoItemDescription />
    <BentoItemImage />
    {/* or <BentoItemArt />, or <BentoItemMedia /> */}
  </BentoItem>
</Bento>

Sizes#

Each BentoItem picks a size: sm (2 cols), md (3 cols), lg (4 cols), feature (4 cols × 2 rows, the anchor tile), and full (the whole row). Below the lg breakpoint the grid collapses to two columns, then one, so every tile stays legible on mobile.

Collapse#

collapse on Bento picks where the grid leaves one column. The default, sm, steps through two columns before the six. lg holds one column until lg: reach for it when a row holds three tiles, because a two-column step can only lay a row of three out as a pair and an orphan. The tiles read the choice from the grid, so a wide tile never forces a second column into a one-column grid. Narrow the window to see the difference.

Image fit#

imageFit decides what a BentoItemImage is. frame (default) floats the shot in a window: inset by the tile padding, top corners rounded, lifted off a muted ground. bleed drops the window: the art is larger than the tile, pinned to the copy's left edge, and runs off the right and bottom edges, dissolving through the fade-b mask into whatever ground the theme gives it. Set it once on Bento; a tile's own imageFit wins.

PreviewCode

Product Design Templates

Create concepts for products or applications with over 200 templates and components.

Framed, for contrast

The same art in the default window: inset, top corners rounded, lifted off a muted ground.

Light and dark shots#

A screenshot is taken in one theme, and a framed window is the first thing that gives it away: a white shot on a dark page reads as a mistake. Pass the same shot taken in a dark theme as darkSrc and BentoItemImage shows src on the light themes (light, cream) and darkSrc on the dark ones (dark, moonlight). The swap is the dark: variant, so it follows the nearest theme, a pinned band included, and only the shot on screen is downloaded. Every other prop applies to both.

PreviewCode

High-converting experience

High-converting experience

Live art#

A shot is one take of one moment. When the moment should follow the visitor's theme and accent, move, or answer a click, put the real components in the window instead. BentoItemArt is the same art window a BentoItemImage paints into, framed by default and bled under imageFit="bleed", with your composition inside. Position it yourself: the window clips it, and a bled window is wider than the tile, so anything past the tile's edge is cut there.

Scale#

scale on Bento is the board's type and spacing step. md (default) is a block among many: 24px tiles, 16px descriptions. lg is the landing board a home page tells its feature story with: 32px tiles, a 32px step to the art, and 18px descriptions. The title stays 8px from its description at both steps, and the bleed cancels the bigger padding. Set once on the grid, so a board never mixes steps.

PreviewCode

Product Design Templates

Create concepts for products or applications with over 200 templates and components.

High-converting experience

Structures meticulously created for maximum conversion and end-to-end purchasing.

API reference#

FAQ#