Skip to main content
The Twitter Card component replicates the familiar Twitter/X post interface, allowing you to display tweets with full engagement metrics, media attachments, and quoted tweets.

​
Preview

import { TwitterCard } from "@/components/ui/twitter-card";

export default function Example() {
  return (
    <TwitterCard
      author={{
        name: "GAIA",
        handle: "heygaia_io",
        avatar: "/avatar.png",
        verified: true,
      }}
      content="Just shipped a new feature! 🚀"
      timestamp={new Date()}
      likes={142}
      retweets={38}
    />
  );
}

​
Installation

npx shadcn@latest add "https://ui.heygaia.io/r/twitter-card"

​
Usage

​
Basic Tweet

import { TwitterCard } from "@/components/ui/twitter-card";

<TwitterCard
  author={{
    name: "GAIA",
    handle: "heygaia_io",
    avatar: "/avatar.png",
    verified: true,
  }}
  content="Just shipped a new feature! 🚀"
  timestamp={new Date()}
  likes={142}
  retweets={38}
/>

​
Tweet with Media

<TwitterCard
  author={{
    name: "GAIA",
    handle: "heygaia_io",
    avatar: "/avatar.png",
  }}
  content="Check out our latest design!"
  timestamp="2024-03-03T10:30:00Z"
  likes={256}
  retweets={78}
  replies={34}
  media="/screenshot.png"
/>

​
Quoted Tweet

<TwitterCard
  author={{
    name: "GAIA",
    handle: "heygaia_io",
    avatar: "/avatar.png",
    verified: true,
  }}
  content="This is what we're all about!"
  timestamp={new Date()}
  likes={89}
  retweets={23}
  quoted={{
    author: {
      name: "Original Author",
      handle: "original_user",
      avatar: "/avatar2.png",
    },
    content: "The future of AI is here.",
  }}
/>

​
Props

​
author
AuthorInfo
required
Author information for the tweet
​
content
string
required
The tweet text content. Supports multi-line text with \n characters.
​
timestamp
Date | string
required
When the tweet was posted. Accepts Date object or ISO string. Automatically formats as relative time (e.g., “2h”, “Mar 3”).
​
likes
number
default:"0"
Number of likes. Automatically formatted (e.g., 1.2K, 3.5M).
​
retweets
number
default:"0"
Number of retweets. Automatically formatted.
​
replies
number
default:"0"
Number of replies. Automatically formatted.
​
media
string
URL to an image to display in the tweet. Limited to 320px height.
​
quoted
QuotedTweet
A quoted tweet to display within this tweet
​
className
string
Additional CSS classes to apply to the card

​
Features

​
Author Information

Displays profile picture, name, handle, and optional verified badge. The header uses a 48x48px circular avatar.

​
Engagement Metrics

All engagement buttons (reply, retweet, like, share) include:
  • Interactive hover states with color-coded backgrounds
  • Icon animations
  • Formatted count displays (1K, 1.2M format)
  • Zero counts are hidden for cleaner UI

​
Media Support

Images are displayed in a rounded container with:
  • Max height of 320px
  • Responsive width
  • Border styling that adapts to dark mode

​
Quoted Tweets

Nested quote cards feature:
  • Smaller avatar (20x20px)
  • Truncated content (2 line clamp)
  • Distinct border to separate from main content

​
Timestamp Formatting

Automatically formats timestamps:
  • Less than 1 hour: “Just now”
  • Less than 24 hours: “Xh”
  • Older: “Mon DD” format

​
Dark Mode Support

Fully supports dark mode with theme-aware colors for backgrounds, text, borders, and hover states.

​
Usage in Gaia

The Twitter Card is used for native tweet embedding, allowing users to consume social content without leaving the dashboard. Perfect for social media monitoring, content curation, and engagement tracking.

​
Accessibility

  • All interactive buttons include aria-label attributes
  • Semantic HTML with proper button elements
  • Keyboard navigation support
  • Screen reader friendly with descriptive labels
The component uses Next.js Image for avatars but standard img tags for media to avoid layout issues with dynamic image sizes.

Build docs developers (and LLMs) love

Get started for freeTalk to us