Tweet Grid

Blocks & Slices

A masonry-ish testimonial wall of tweet cards that fade and rise into view with a staggered column cascade and lift on hover, built on pure CSS multi-column layout that steps down responsively while keeping screen-reader reading order. Under prefers-reduced-motion the grid is fully static — no stagger, hover lift, or sheen — with every card legible at rest.

Inspired by Cult UI — Tweet Grid (free, MIT) — independently built, not affiliated. Attribution policy

Ava ChenVerified account
@avabuilds
Shipped our landing page with Parable blocks in an afternoon — the stagger-on-view is chef's kiss.
1.3K
Marcus Reyes
@mreyes
The reduced-motion fallback actually works. Rare.
342
Lin OrtegaVerified account
@linpixels
Copy, paste, done. No dependency hell.
5.6K
Dev Patel
@devp
Masonry that still reads top-to-bottom for screen readers. Thoughtful.
89

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/tweet-grid.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/tweet-grid.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-md p-4">
    <TweetGrid
      columns={2}
      tweets={[
        { name: "Ava Chen", handle: "avabuilds", verified: true, likes: 1284, href: "#", body: "Shipped our landing page with Parable blocks in an afternoon — the stagger-on-view is chef's kiss." },
        { name: "Marcus Reyes", handle: "mreyes", likes: 342, body: "The reduced-motion fallback actually works. Rare." },
        { name: "Lin Ortega", handle: "linpixels", verified: true, likes: 5600, body: "Copy, paste, done. No dependency hell.", media: <div className="h-full w-full bg-gradient-to-br from-[#8b5cf6] via-[#ec4899] to-[#f5a623]" /> },
        { name: "Dev Patel", handle: "devp", likes: 89, body: "Masonry that still reads top-to-bottom for screen readers. Thoughtful." },
      ]}
    />
  </div>

Props

TweetGridProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "children">

Prop	Type	Default	Description
tweets*	Tweet[]	—	Demo/testimonial data. No live API — the wall renders what you pass.
columns	number	3	Maximum columns (default 3). Fewer are used as the container narrows.
className	string	—	—

npm dependencies

motion