Productivity stats

Productivity bento grid with animated stats.

Usage

import { BentoGrid05 } from '@/components/blocks/bento-grid-05'


<BentoGrid05 />


// Override any card's copy. Fields you leave out keep their defaults.
<BentoGrid05
  focus={{ title: 'Focus time', value: 68, period: 'This week' }}
  shortcut={{ keys: [['Ctrl', 'Shift'], ['K']] }}
  onEnabledChange={(enabled) => console.log(enabled)}
/>

Install

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

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

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

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

Source

Props

Productivity stats props
Prop	Type	Default	Description
integration	Partial<{ title: string; description: string; actionLabel: string; actionHref: string; switchLabel: string }>	= { title: 'Zapier automations', actionLabel: 'Configure', … }	Copy for the tall integration card, its Configure link and the switch label.
connected	Partial<{ title: string; subtitle: string }>	= { title: 'Connected apps', subtitle: '3 active integrations' }	Copy for the connected apps card.
focus	Partial<{ title: string; subtitle: string; linkLabel: string; linkHref: string; value: number; caption: string; period: string }>	= { title: 'Deep work', value: 42, … }	Copy for the focus analytics card. value is the percentage that counts up.
productivity	Partial<{ stat: string; title: string; description: string }>	= { stat: '10x', title: 'Team output', … }	Copy for the tall stat card.
shortcut	Partial<{ title: string; description: string; keys: string[][] }>	= { title: 'Keyboard shortcuts', keys: [['⌘', '⌥'], ['M']] }	Copy for the shortcuts card. Each inner array is one key pill.
defaultEnabled	boolean	= true	Initial state of the integration toggle.
onEnabledChange	(enabled: boolean) => void	= —	Called when the integration toggle changes.
className	string	= —	Extra classes for the outer section.