Team collaboration

Bento grid with a working comment thread.

Usage

import { BentoGridFeatures } from '@/components/blocks/bento-grid-03'


<BentoGridFeatures />


// Change the copy with props. The mockups live in bento-grid-03.tsx, so edit them there.
<BentoGridFeatures
  eyebrow="Teamwork"
  title="Review work without the meetings"
  commentPlaceholder="Reply or @mention a teammate"
  features={{ cursors: 'See every edit as it happens' }}
/>

Install

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

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

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

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

Source

Props

Team collaboration props
Prop	Type	Default	Description
eyebrow	string	= 'Better together'	Small label above the heading.
title	ReactNode	= 'One shared space for every moving part'	Section heading.
description	string	= 'Threads, live presence and shared cursors…'	Muted paragraph under the heading.
features	Partial<Record<'integrations' \| 'presence' \| 'comments' \| 'actions' \| 'cursors', string>>	= —	Screen reader headings for each tile. Anything you leave out keeps its default.
commentPlaceholder	string	= 'Add a reply or @ someone'	Placeholder for the reply box in the comment thread.
className	string	= —	Extra classes for the outer section.