Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
Tweet Card
A card that displays a tweet with the author's name, handle, and profile picture.
import { ClientTweetCard } from "@/registry/sase/client-tweet-card";
/**
* <TweetCard /> (Server Side Only)
* <ClientTweetCard /> (Client Side Only)
*/
export function TweetDemo() {
return <ClientTweetCard id="1993025719921000602" />;
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/tweet-card.json
Usage
To render on server side using RSC (Next.js 13):
import { TweetCard } from "@/components/ui/tweet-card"
export default async function App() {
return <TweetCard id="1441032681968212480" />
}To render on client side:
"use client"
import { ClientTweetCard } from "@/components/ui/client-tweet-card"
export default function App() {
return <ClientTweetCard id="1441032681968212480" />
}Examples
Tweet Card With Image Carousel
import { ClientTweetCard } from "@/registry/sase/client-tweet-card";
export function TweetImages() {
return <ClientTweetCard id="1993087250410643465" className="shadow-2xl" />;
}
Tweet Card With Meta URL Preview
import { ClientTweetCard } from "@/registry/sase/client-tweet-card";
export function TweetMetaPreview() {
return <ClientTweetCard id="1993071562862526571" className="shadow-2xl" />;
}
Props
ClientTweetCard
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | The id of the tweet to display. |
TweetCard
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | The id of the tweet to display. |
Credits
This component is built on top of React Tweet.