Design platform stats

Stat tile bento grid with a tall photo.

Usage

import { BentoGrid04 } from '@/components/blocks/bento-grid-04'


<BentoGrid04 />


// Change the copy and numbers with props. The photo and icons live in bento-grid-04.tsx.
<BentoGrid04
  title="Built for product teams"
  speed={{ value: 99, suffix: '%', caption: 'of edits sync in under 100ms' }}
  history={{ linkHref: '/docs/version-history' }}
  handoff={{ value: 42, caption: 'fewer review rounds per release' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/bento-grid-04

npx shadcn@latest add @pastaui-pro/bento-grid-04

yarn dlx shadcn@latest add @pastaui-pro/bento-grid-04

bunx --bun shadcn@latest add @pastaui-pro/bento-grid-04

Source

Props

Design platform stats props
Prop	Type	Default	Description
title	ReactNode	= 'Designed for teams that ship'	Section heading.
description	string	= 'From the first sketch to the final handoff…'	Muted paragraph under the heading.
community	Partial<{ value: number; decimals?: number; prefix?: string; suffix?: string; title: string; description: string }>	= { value: 2.4, decimals: 1, suffix: 'M+', … }	Stat, heading and text at the bottom of the tall photo tile.
speed	Partial<{ value: number; decimals?: number; prefix?: string; suffix?: string; caption: string }>	= { value: 98, suffix: '%', … }	Big number and caption on the blue gradient tile.
history	Partial<{ value: number; decimals?: number; prefix?: string; suffix?: string; label: string; title: string; description: string; linkLabel: string; linkHref: string }>	= { value: 1.2, decimals: 1, suffix: 'B', … }	Inset stat, heading, text and link on the wide white tile.
workflow	{ title?: string; description?: string; items?: [{ title: string; description: string }, { title: string; description: string }] }	= { title: 'Design and build in one place', … }	Heading, text and the two icon items on the glow tile.
handoff	Partial<{ value: number; decimals?: number; prefix?: string; suffix?: string; caption: string }>	= { value: 38, suffix: '%', … }	Big number and caption on the pale sky tile.
className	string	= —	Extra classes for the outer section.
style	CSSProperties	= —	Inline styles, handy for overriding the --bg4-* theme variables.