Bento Showcase

A six-card marketing bento: a hero with a live chat and a headline, a laptop of case studies, one line that says what you do, figures that scroll up, the plans on a phone, and a strip of the team that scrolls left. Flat cards, no borders, no shadows — colour is the only thing separating them. One component, both themes: pastels on white in light mode, the same hues deepened on black in dark mode, switched by the dark class like the rest of the library.

BentoShowcase is a section built from library pieces. Both moving cards are Marquee (direction="up" and "left"), the conversation is Chat Bubble, the rating is Half Stars, the device is Mobile Mockup and the call to action is Button. Each card is a named part — Hero, CaseStudies, Headline, Stats, Phone, Team — so a page can leave one out, reorder them, or add its own with BentoShowcase.Card.

Managed call centre

Three columns and three rows at desktop, two columns at tablet, a single stack on phones. The figures scroll up and the team scrolls left; both pause under the pointer and hold still under prefers-reduced-motion.

Hero: takes a photo, a chat (who wrote, what they wrote, who replied and what) and the headline as children — wrap the display phrase in <em> for the serif italic. avatars sit under it as social proof.
Stats: is a MarqueeBlock going up: each item is a figure, a caption, a tone and an optional ornament (spheres, ring, drops).
Team: is a MarqueeBlock going left: every cell is an ellipse, cells alternate high and low, and a figure disc follows every other photo when stat is given. Keep the cell count even so the loop stays seamless.
Headline: sets the <em> phrase on its own line in the serif, with a scribble under it. Put a <br /> where the sans lines should break.
Phone: puts the first plan on an Iphone17ProMaxMockup, tilted and run off the card's edge, with the second plan peeking in below. onAction is the button.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Bento Showcase

npx shadcn@latest add @algorize-ui/bento-showcase

components/custom/blocks/BentoShowcaseBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Bento Showcase to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

button, chat-bubble, half-stars, marquee and mobile-mockup are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/button @algorize-ui/chat-bubble @algorize-ui/half-stars @algorize-ui/marquee @algorize-ui/mobile-mockup

Your own card

Every part renders through BentoShowcase.Card, and so can yours. It takes a tone, an optional top-right label, and the grid placement as ordinary Tailwind — the grid is 3fr 2fr 3fr across, rows of 15rem, at lg; two columns at md.

The built-in parts carry their own placement (Hero is column 1, rows 1–2; Phone is column 3, rows 2–3, and so on). Pass className with your own lg:col-start-* / lg:row-start-* to move one — later utilities win.

Features

Built from the library

Marquee for both scrolling cards, Chat Bubble for the conversation, Half Stars for the rating, Mobile Mockup for the device and Button for the call to action. Install this one item and all five come with it.

Two things move, nothing else

The figures scroll up and the team scrolls left; the chat pops in once. Both marquees pause under the pointer and stay put under prefers-reduced-motion, with the content still readable.

Compound, not configured

Six named parts you can drop, reorder or replace, and a plain Card for anything else. Headlines are children, so the serif phrase is an em tag, not a prop.

Light and dark, one component

Follows the site theme with no prop: a white ground and pastel cards in light mode, a black ground and the same hues deepened in dark mode. The chat, the phone screen and the call bar switch with it; the laptop, the yellow accents and the ornaments stay as they are.

Responsive to a single column

3-2-3 columns at lg, two at md, one on phones. The tilted phone and both marquees keep their own height when the grid rows go away.

Props Reference

BentoShowcase

Prop	Type	Default	Description
`children`	`ReactNode`	—	The cards. Any mix of the named parts and `BentoShowcase.Card`.
`className`	`string`	—	Applied to the section (white in light mode, black in dark). Add `rounded-[36px]` inside a container.

BentoShowcase.Card

Prop	Type	Default	Description
`tone`	`"cream" \| "ice" \| "lilac" \| "sky" \| "butter" \| "ink"`	`"cream"`	The card's colour. Every pastel has a deep dark-mode counterpart; `ink` is the contrast card and flips (dark on light, light on dark); `butter` is the accent and stays yellow on both. Use `text-current/…` for secondary text so it follows the tone.
`label`	`ReactNode`	—	Small caption in the top-right corner.
`className`	`string`	—	Grid placement, padding, minimum height.

BentoShowcase.Hero

Prop	Type	Default	Description
`photo`, `photoAlt`	`string`	—	The portrait, shown in an arch. Use a picture with the subject in the upper middle.
`chat`	`{ from, fromRole?, message, as, reply, avatar? }`	—	The customer's message and the reply. `as` is the name the reply is sent under.
`chip`	`string`	`"Virtual agent"`	The yellow chip under the chat.
`avatars`	`string[]`	`[]`	Small overlapping faces under the headline.
`label`	`ReactNode`	`"Managed call centre"`	Top-right caption.
`children`	`ReactNode`	—	The headline. An `<em>` inside it is set in the serif italic.

BentoShowcase.CaseStudies

Prop	Type	Default	Description
`items`	`{ quote, metrics: { value, label? }[] }[]`	—	Up to three results on the laptop screen, each a quote over two figures.
`rating`, `reviews`	`number`	`5`, —	Stars in the corner and the count under them.
`logo`	`ReactNode`	a black disc	Mark shown before the stars — your own logo, or `null` for none.
`title`	`string`	`"Client wins"`	Heading on the screen; wraps to two lines.

BentoShowcase.Headline

Prop	Type	Default	Description
`photo`, `photoAlt`	`string`	—	Small picture in the top-left, clipped to a pill.
`label`	`ReactNode`	`"Call handling"`	Top-right caption.
`children`	`ReactNode`	—	The line. The `<em>` phrase takes its own line in the serif italic with a scribble under it; add `<br />` where the sans lines should break.

BentoShowcase.Stats

Prop	Type	Default	Description
`items`	`{ value, caption, tone?, ornament? }[]`	—	Figures that scroll up. `ornament` is `"spheres"`, `"ring"` or `"drops"`, drawn in CSS.
`speed`	`number`	`16`	Seconds per loop.

BentoShowcase.Phone

Prop	Type	Default	Description
`plans`	`[BentoPlan, BentoPlan?]`	—	The first plan is shown in full (`rank`, `name`, `price`, `note`, `image`, `benefits`, `action`); the second only needs `rank`, `name` and `image`.
`onAction`	`() => void`	—	Click handler for the button on the screen.

BentoShowcase.Team

Prop	Type	Default	Description
`photos`	`{ src, alt? }[]`	—	Portraits that scroll left as ellipses, alternating high and low.
`stat`	`{ value, caption }`	—	A figure repeated in a disc after every other photo.
`speed`	`number`	`36`	Seconds per loop.