Content studio

Two-column masonry of AI studio feature tiles.

Usage

import { BentoGrid } from '@/components/blocks/bento-grid-01'


<BentoGrid />


// Change the copy with props. The images live in bento-grid-01.tsx, so edit them there.
<BentoGrid
  eyebrow="Why us"
  title="Everything your content team needs"
  promptText="Create a summer launch ad"
  features={{
    prompt: { label: 'Prompt', title: 'Describe the ad you want' },
    modes: { title: 'Pick how hands-on you want to be' },
  }}
/>

Install

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

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

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

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

Source

Props

Content studio props
Prop	Type	Default	Description
eyebrow	string	= 'Why Loudhailer'	Small label above the heading.
title	ReactNode	= Every campaign, one prompt away	Section heading. The default highlights “one prompt” in a coral gradient.
features	Partial<Record<'prompt' \| 'variants' \| 'models' \| 'integrations' \| 'consistency' \| 'modes', { label?: string; title?: string }>>	= —	Overrides for the label and heading of each tile. Anything you leave out keeps its default.
promptText	string	= 'Make a cold brew ad'	Text typed into the prompt input mockup.
modesHint	string	= 'Autopilot picks sizes, copy and layout'	Muted line under the mode toggle.
className	string	= —	Extra classes for the outer section.