Bento 9 - Dark chatbot bento with conversation tiles

Pro

Five-tile black bento for chatbot features with animated message bubbles, encryption UI, voice imagery, and context-aware suggestion chips.

Shadcn Bento 9 block

Component Data

  • ID:bento9
  • Access:pro
  • Created:Jul 13, 2026
  • Type:block

Bento 9 block design & features

Bento9 is a five-tile bento built with Shadcn UI on a black section using a six-column grid. The top row holds three equal square tiles: the first renders alternating left-right chat bubbles with avatar icons and a typing indicator, the second shows an encryption-themed interface panel, and the third centers a contained voice input illustration. The bottom row splits into two wide sixteen-to-nine tiles covering context-aware suggestion chips with sparkle icons and typed keyword highlights, plus a simple command-processing UI mock.

Near-black card backgrounds with faint white borders sit on a pure black page field. Chat bubbles use translucent white fills and circular avatar wells. Muted gray body copy contrasts with white headings. Scroll-triggered scale and slide animations run on the image tile and message sequence.

Dark and techy with a conversational AI product identity. The animated chat thread and keyword-highlighted suggestion chips make this more interactive than a typical feature grid. Elaborate relative to image-only bentos because most tiles are CSS-built UI scenes.

The mosaic stacks to one column on smaller breakpoints while keeping square and wide tile proportions within each card.