# Tweet Grid

> Masonry grid of embedded tweets for React and shadcn/ui from a list of tweet IDs, for testimonial walls and social proof.

Source: https://www.cult-ui.com/docs/components/tweet-grid

## Example

```tsx title="tweet-grid-demo.tsx"
"use client"

import * as React from "react"

import { GradientHeading } from "../ui/gradient-heading"
import { TweetGrid } from "../ui/tweet-grid"

// Grab tweet ids
const exampleTweets = [
  "1742983975340327184",
  "1743049700583116812",
  "1754067409366073443",
  "1753968111059861648",
  "1754174981897118136",
  "1743632296802988387",
  "1754110885168021921",
  "1760248682828419497",
  "1760230134601122153",
  "1760184980356088267",
]

export default function TweetGridDemo({}) {
  return (
    <div className="max-w-md pb-12 md:max-w-4xl">
      <div className="flex w-full justify-center pb-12">
        <GradientHeading size="xl" weight="black">
          Join the club
        </GradientHeading>
      </div>
      <div className="flex w-full items-center justify-center">
        <TweetGrid
          className="w-80 md:w-full"
          tweets={exampleTweets}
          columns={2}
          spacing="lg"
        />
      </div>
    </div>
  )
}
```

Tweet Grid is a React layout component for shadcn/ui with configurable columns and spacing. Use it for testimonial walls, social proof sections, or community pages.

## Installation

### CLI

```bash
npx shadcn@latest add @cult-ui/tweet-grid
```

### Manual

**Copy and paste the following code into your project.**

```tsx title="tweet-grid.tsx"
"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const tweetGridVariants = cva("max-w-4xl px-2 md:max-w-6xl", {
  variants: {
    columns: {
      1: "columns-1",
      2: "sm:columns-2",
      3: "md:columns-3",
      4: "lg:columns-4",
      5: "xl:columns-5",
    },
  },
  defaultVariants: {
    columns: 3,
  },
})

const tweetItemVariants = cva("break-inside-avoid", {
  variants: {
    spacing: {
      sm: "mb-2",
      md: "mb-4",
      lg: "mb-6",
    },
  },
  defaultVariants: {
    spacing: "md",
  },
})

export interface TweetGridProps
  extends VariantProps<typeof tweetGridVariants>,
    VariantProps<typeof tweetItemVariants> {
  tweets: string[]
  className?: string
}

// Mock Tweet component to avoid react-tweet CSS import issues
const MockTweet: React.FC<{ id: string }> = ({ id }) => {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
      <div className="mb-3 flex items-center space-x-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500">
          <span className="text-sm font-bold text-white">T</span>
        </div>
        <div>
          <div className="font-semibold text-gray-900 dark:text-white">
            Twitter User
          </div>
          <div className="text-sm text-gray-500 dark:text-gray-400">@user</div>
        </div>
      </div>
      <div className="mb-3 text-gray-900 dark:text-white">
        This is a mock tweet placeholder. Tweet ID: {id}
      </div>
      <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
        <span>💬 0</span>
        <span>🔄 0</span>
        <span>❤️ 0</span>
      </div>
    </div>
  )
}

export const TweetGrid: React.FC<TweetGridProps> = ({
  tweets,
  columns,
  spacing,
  className,
}) => {
  return (
    <div className={cn(tweetGridVariants({ columns }), className)}>
      {tweets.map((tweetId, i) => (
        <div
          key={`${tweetId}-${i}`}
          className={cn(tweetItemVariants({ spacing }))}
        >
          <MockTweet id={tweetId} />
        </div>
      ))}
    </div>
  )
}
```

**Update the import paths to match your project setup.**

## Usage

```tsx
// Grab tweet ids
const exampleTweets = [
  "1742983975340327184",
  "1743049700583116812",
  "1754067409366073443",
  "1753968111059861648",
  "1754174981897118136",
  "1743632296802988387",
  "1754110885168021921",
  "1760248682828419497",
  "1760230134601122153",
  "1760184980356088267",
];
export default function TweetGridDemo() {
  return <TweetGrid tweets={exampleTweets} />;
}
```