Tweet Card: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add tweet-card.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Display namename

Handlehandle

Post textcontent

Timestamp texttimestamp

Show the verified badgeverified

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TweetCard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

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

Or, 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-label and aria-pressed, and the verification badge carries an aria-label
The avatar is decorative only and marked aria-hidden, so announcements focus on the name and the content

Tweet Card