Resource showcase

Resource bento grid under a split header.

Usage

import { BentoGridShowcase } from '@/components/blocks/bento-grid-02'


<BentoGridShowcase />


// Change the copy with props. The mockups live in bento-grid-02.tsx, so edit them there.
<BentoGridShowcase
  badge="Open Beta_"
  title="Our growth playbook, now free."
  stats={['+5,000 Teams', 'Updated weekly']}
  tiles={{
    library: { label: '800 screens', tag: 'Onboarding' },
    playbooks: { tag: 'Checklists' },
  }}
/>

Install

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

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

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

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

Source

Props

Resource showcase props
Prop	Type	Default	Description
badge	string	= 'Free to explore'	Label in the green badge above the heading.
title	ReactNode	= Years of UX research, now open to all.	Section heading. The default breaks onto two lines with a gift icon.
description	string	= 'Think of it as a growth team on call…'	Muted paragraph on the right of the header.
stats	string[]	= ['12,000+ readers', 'Rated 4.9 by product teams']	Green proof points under the heading.
tiles	Partial<Record<'library' \| 'analytics' \| 'principles' \| 'teardowns' \| 'playbooks', { label?: string; tag?: string }>>	= —	Overrides for the small label and black pill of each tile. Anything you leave out keeps its default.
className	string	= —	Extra classes for the outer section.