A bento grid of product screens that reveal with a staggered wipe. On hover or focus each screenshot zooms and a caption slides up with a short description and an arrow.
Real screens from the product. Hover any tile to see what it does, or open it to try the live demo.
Open the interactive demoEvery spike links to the deals, campaigns and refunds behind it.
Drag cards across stages and owners get pinged automatically.
See launches, sprints and time off on one grid.
Discuss any record without leaving it.
Drivers, stops and ETAs update every few seconds on the map.
Automate reports in TypeScript with typed access to every table.
npx shadcn@latest add https://hyperblur.dev/r/showcase-bento-gallery.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-bento-gallery.tsx.
import { ShowcaseBentoGallery } from "@/components/hyperblur/showcase-bento-gallery"
<ShowcaseBentoGallery onItemSelect={(item) => track(item.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Product tour" | Label above the title. |
| title | string | "One workspace, every view your team needs" | Section heading. |
| subtitle | string | Short line about the screens | Paragraph on the right of the heading. |
| items | ShowcaseBentoGalleryItem[] | Six tiles | Up to six tiles with title, caption, href, kind (chart, board, calendar, chat, map, editor), optional tag and optional image URL that replaces the built-in screen. |
| cta | { label: string; href: string } | null | { label: "Open the interactive demo", href: "#" } | Link under the subtitle. Pass null to hide it. |
| onItemSelect | (item: ShowcaseBentoGalleryItem, index: number) => void | Called when a tile is clicked. | |
| accent | string | "#ff6b4a" | Color of charts, routes, the caret and focus rings. |