Tweet Card
A card displaying a tweet (avatar / handle / content) with a reveal animation and interactive like and repost actions.
A card modeled on a social post: avatar, verification badge, content, and an action row; it fades in and lifts as it slides into the viewport, and rises slightly on hover.
Loading preview…
npx shadcn@latest add https://webberui.com/r/tweet-card.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<TweetCard />
Installation
npx shadcn@latest add https://webberui.com/r/tweet-card.jsonOr, once registries are configured in components.json, install it as @webberui/tweet-card.
Usage
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 }}
/>;When avatarSrc is not supplied, a stable gradient initials avatar is generated from the name. The like and repost buttons toggle on click, updating their counts immediately.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Display name |
handle | string | — | Account handle (without @, which is added automatically) |
content | string | — | Tweet content; \n is preserved as a line break |
avatarSrc | string | — | Avatar image source; when not supplied, a gradient avatar is generated from the name's initials |
verified | boolean | false | Whether to show the blue verification checkmark |
timestamp | string | — | Timestamp text, for example 2h or Jul 14 |
stats | { replies?: number; reposts?: number; likes?: number } | — | Engagement numbers shown in the action row |
once | boolean | true | Plays the reveal animation only the first time the element enters the viewport |
Accessibility
- When the user has "reduce motion" enabled at the system level, the reveal, hover, and click scaling animations are skipped and a static card renders
- Every action button has an
aria-labelandaria-pressed, and the verification badge carries anaria-label - The avatar is decorative only and marked
aria-hidden, so announcements focus on the name and the content