Skip to content
Magic UI SolidMagicUI Solid
Menu
Getting Started
IntroductionInstallation
Components
MarqueeTerminalHero Video DialogBento GridAnimated ListDockGlobeTweet CardOrbiting CirclesAvatar CirclesLensIcon CloudPointerSmooth CursorProgressive BlurDotted Map
Special Effects
Animated BeamBorder BeamShine BorderMagic CardGlare HoverMeteorsConfettiParticlesTheme Toggler
Animations
Blur Fade
Text Animations
Text AnimateTyping AnimationLine Shadow TextAurora TextVideo TextNumber TickerAnimated Shiny TextAnimated Gradient TextText RevealDia Text RevealHyper TextWord RotateScroll Based VelocitySparkles TextMorphing TextSpinning TextText HighlighterText 3D Flip
Device Mocks
SafariiPhoneAndroid
Buttons
Rainbow ButtonShimmer ButtonRipple Button
Backgrounds
Flickering GridAnimated Grid PatternRetro GridRippleDot PatternGrid PatternHexagon PatternStriped PatternInteractive Grid PatternLight RaysNoise Texture
Community
Shiny ButtonFile TreeCode ComparisonScroll ProgressNeon Gradient CardComic TextKinetic TextCool ModePixel ImagePulsating ButtonWarp BackgroundInteractive Hover ButtonAnimated Circular Progress BarBacklightGlyph Matrix

Tweet Card

A card that displays a tweet with the author's name, handle, and profile picture.

@/demos/TweetCardDemo.tsx
import { ClientTweetCard } from '@/registry/magicui/client-tweet-card'


export function TweetCardDemo() {
  return <ClientTweetCard id="1668408059125702661" />
}

Installation

Section titled “Installation”
Terminal window
pnpm dlx shadcn@latest add @magicui-solid/client-tweet-card

Import

Section titled “Import”
import { ClientTweetCard } from '@/components/magicui/client-tweet-card'

Usage

Section titled “Usage”
<ClientTweetCard id="1441032681968212480" />

Examples

Section titled “Examples”
Section titled “Tweet Card With Image Carousel”
@/demos/TweetCardImagesDemo.tsx
import { ClientTweetCard } from '@/registry/magicui/client-tweet-card'


export function TweetCardImagesDemo() {
  return <ClientTweetCard id="1678577280489234432" class="shadow-2xl" />
}

Tweet Card With Meta URL Preview

Section titled “Tweet Card With Meta URL Preview”
@/demos/TweetCardMetaPreviewDemo.tsx
import { ClientTweetCard } from '@/registry/magicui/client-tweet-card'


export function TweetCardMetaPreviewDemo() {
  return <ClientTweetCard id="1675849118445436929" class="shadow-2xl" />
}

Props

Section titled “Props”
Prop Type Default Description
id string - The id of the tweet to display.
fallback JSX.Element TweetSkeleton() Loading skeleton shown while fetching.
apiUrl string - Custom API URL to fetch the tweet from.
fetchOptions RequestInit - Options passed to the underlying fetch.
onError Function - Callback invoked when fetching the tweet fails.

Original:

magicui.design/docs/components/tweet-card