The Tweet Card component provides a beautiful way to display Twitter/X posts with support for videos, photos, and interactive elements. Perfect for showcasing social media content with a consistent design.
Installation
1. Install Dependencies
2. React Server Component Setup
Copy and paste the following code into your project:
3. Server Action Setup (Optional)
If you want to fetch tweets server-side, create a server action:
Make sure to update the import paths to match your project structure:
- The
cnutility should point to your utils file - Place the server action in your
app/actionsdirectory - Adjust the component's location based on your project organization
Examples
Basic Usage
X Icon Variant
Hidden Media
Compact Mode
Usage
Basic Tweet Card
X Icon Variant
Hidden Media
Compact Mode
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | required | The Twitter/X post ID |
| className | string | undefined | Additional classes for styling |
| compact | boolean | false | Enable compact mode |
| hideMedia | boolean | false | Hide photos and videos |
| iconVariant | "twitter" | "x" | "twitter" | Choose between Twitter or X icon |
Features
- Smooth loading animations
- Video and photo support
- Compact mode for space efficiency
- Twitter/X icon variants
- Like and reply interactions
- Loading skeleton states
- Error handling
- Dark mode support
- Responsive layout
- Verified badge support
- Media hiding option
- Interactive hover states
Credits
This component was inspired by the excellent work of Steven Tey and his implementation in Dub.co.