Client Tweet Card

from @magicui

A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.

Install

New to shadcn? Set up your project

If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.

$pnpm dlx shadcn@latest init

Setup by framework · Configure a registry namespace

$pnpm dlx shadcn@latest add @magicui/client-tweet-card

Code

registry/magicui/client-tweet-card.tsxtsx · 697 B · MIT

"use client"

import { useTweet, type TweetProps } from "react-tweet"

import {
  MagicTweet,
  TweetNotFound,
  TweetSkeleton,
  type TweetLogo,
} from "@/registry/magicui/tweet-card"

export const ClientTweetCard = ({
  id,
  apiUrl,
  fallback = <TweetSkeleton />,
  components,
  fetchOptions,
  onError,
  ...props
}: TweetProps & { className?: string; logo?: TweetLogo }) => {
  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} />
}