Client Tweet Card
A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
Live preview from the library's source
Install
From Magic UI
npx shadcn@latest add @magicui/client-tweet-cardFrom this collection
npx shadcn@latest add https://allcomps.vercel.app/r/magicui--client-tweet-card.jsonCode
"use client"
import { useTweet, type TweetProps } from "react-tweet"
import {
MagicTweet,
TweetNotFound,
TweetSkeleton,
} from "@/registry/magicui/tweet-card"
export const ClientTweetCard = ({
id,
apiUrl,
fallback = <TweetSkeleton />,
components,
fetchOptions,
onError,
...props
}: TweetProps & { className?: string }) => {
const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)
if (isLoading) return fallback
if (error || !data) {
const NotFound = components?.TweetNotFound ?? TweetNotFound
return <NotFound error={onError ? onError(error) : error} />
}
return <MagicTweet tweet={data} {...props} />
}
Other testimonials
The same kind of component from the other libraries in the collection.