Tweet Card

顯示推文（頭像／帳號／內容）的卡片，帶進場動畫與可互動的喜歡、轉發動作。

模擬社群貼文的卡片：頭像、認證徽章、內容與互動動作列，滑入視口時淡入上浮，滑鼠懸停微微抬升。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

顯示名稱name

帳號 handlehandle

推文內容content

時間戳文字timestamp

顯示認證徽章verified

<TweetCard />

安裝

npx shadcn@latest add https://webberui.com/r/tweet-card.json

或在 components.json 設定 registries 後，改用 @webberui/tweet-card 安裝。

安裝依賴後，從 registry JSON（/r/tweet-card.json 的 files[0].content）複製 tweet-card.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { TweetCard } from "@/components/ui/tweet-card";

<TweetCard
  name="Webber UI"
  handle="webberui"
  verified
  timestamp="2h"
  content="Ship animation-first components without the boilerplate."
  stats={{ replies: 42, reposts: 128, likes: 1200 }}
/>;

未提供 avatarSrc 時，會依名稱自動產生穩定的漸層首字母頭像。喜歡與轉發按鈕可點擊切換，計數即時更新。

Props

Prop	型別	預設值	說明
`name`	`string`	—	顯示名稱
`handle`	`string`	—	帳號 handle（不含 `@`，自動補上）
`content`	`string`	—	推文內容，`\n` 保留為換行
`avatarSrc`	`string`	—	頭像圖片來源；未提供時以名稱首字母產生漸層頭像
`verified`	`boolean`	`false`	是否顯示藍勾認證徽章
`timestamp`	`string`	—	時間戳文字，例如 `2h` 或 `Jul 14`
`stats`	`{ replies?: number; reposts?: number; likes?: number }`	—	互動數據，供動作列顯示
`once`	`boolean`	`true`	只在第一次進入視口時播放進場動畫

可及性

使用者系統開啟「減少動態效果」時，跳過進場、懸停與點擊縮放動畫，直接渲染靜態卡片
每個動作按鈕都有 aria-label 與 aria-pressed，認證徽章帶 aria-label
頭像為純裝飾，標記 aria-hidden，朗讀時聚焦於名稱與內容

Playground

安裝

使用

Props

可及性

On this page